How to disable autocomplete and autocapitalize for text in semantics?

Submitted by papi Jo on Sun, 02/27/2022 - 18:45
papi Jo's picture
Forums: 
Developers

I am currently adding a new "find a single word" feature to my "Guess The Sentence" H5P Content. I have a text field which works OK on a computer, but on a mobile device (phone or tablet) the autocomplete and autocapitalize functions get in the way. Is there a widget or something like it that I could add to my text field in my semantics.json script to de-activate these features?

otacke's picture

otacke

Mon, 02/28/2022 - 10:37

Hi PapiJo!

There are no such options, unfortunately. If you want to set the autocomplete or autocapitalize properties of the text input field in your editor semantics, you will need to amend the text widget in H5P core or to write your own widget.

Best,

Oliver 

papi Jo's picture

papi Jo

Mon, 02/28/2022 - 11:53

Thanks for your prompt reply, Oliver. I thought so. I'll have a look at the H5P.Text library as you suggest.

otacke's picture

otacke

Mon, 02/28/2022 - 18:06

Hi!

H5P.Text or H5P.AdvancedText are libraries that determine the view, but I was under the impression you were talking about the behavior in the editor given that you referenced semantics.json.

If it's something in the view of your content type, all you need to do is to make sure that your input element has the attributes set as you need them. If it's something in the editor, then looking at H5P.Text or H5P.AdvancedText won't help you at all. Text input fields are added via h5peditor-text.js. You could, for instance, patch that file and add a property to the parameters (e.g. an array named attributes that can hold key-value pairs with the key being a valid input element attribute and the value a respective value) that users can set in semantics.json and would be used to set the attributes in the editor - don't forget a pull request if the H5P core team agrees up-front to add that feature. Or you can write a widget for that field that actually does the same and that you can add in semantics, but would not require to change anything in H5P core.

Best,
Oliver

papi Jo's picture

papi Jo

Thu, 03/10/2022 - 23:44

Further to your advice I have found how to patch the needed 2 files in h5peditor. As a proof of concept I have added 3 attributes (which I need) to the text input field, as seen in the attached patch file, autocomplete, autocapitalize, style. It works fine when I call those attributes in my semantics file.

There may be other useful attributes that other users would like to have available.

But, as you suggest, the best way for my current use would be to create a special text widget, in order to not touch the H5P core files. But I have no idea where to start, as I have not found an example text widget to base my work on. If you could find the time, in your busy schedule, to give me some pointers, I woud be grateful.

Best,

papi Jo

Attachments: 
Plain text icon h5peditor_add_input_attributes.diff_.txt
otacke's picture

otacke

Fri, 03/11/2022 - 01:14

You can use https://github.com/otacke/h5p-editor-boilerplate and add it to your text field.

Then you should be able to set custom attributes in semantics.json that you can retrieve via the field parameter (or this.field) of the widget, and you can access, use and modify exposed variables and functions of the original text field class via the widget's fieldInstance property (this.fieldInstance). That's the original instance that the editor uses. In particular, you'd want to add attributes to the $input property.

Best,

Oliver 

papi Jo's picture

papi Jo

Fri, 03/11/2022 - 11:29

Thanks Oliver,

I'll have a look.

papi Jo's picture

papi Jo

Fri, 03/11/2022 - 19:27

Need some more help. On my Drupal 7 local site in dev mode I have done the following:

  • downloaded your h5p-editor-boilerplate and installed npm and built etc.
  • added to my Guess It  H5P Content library: {
          "machineName": "H5PEditor.Boilerplate",
          "majorVersion": 0,
          "minorVersion": 1
        }
  • added to my "Guess It"  H5P Content semantics: "name": "sentence",
              "type": "text",
              "widget": "Boilerplate",
             etc.
  • when I edit my "Guess It" content, all I can see is on that "sentence" field: [field:text:Boilerplate:sentence]
  • In  H5PEditor.Boilerplate library I have tried to switch the path to point to "path": "src/scripts/h5peditor-boilerplate.js" instead of the dist directory, and now I get this error: Uncaught SyntaxError: export declarations may only appear at top level of a module h5peditor-boilerplate.js:78
  • What am I missing?
otacke's picture

otacke

Fri, 03/11/2022 - 19:51

Widget names do not start with a capital letter. If you're in doubt what the widget name is, you could check where it's defined, here at the entry point at https://github.com/otacke/h5p-editor-boilerplate/blob/master/src/entries/h5peditor-boilerplate.js#L6

papi Jo's picture

papi Jo

Sat, 03/12/2022 - 18:54

Thanks for pointing to my mistake re the widget name!

I have now reached the point where, in your boilerplate example I find these lines:

// Instantiate original field (or create your own and call setValue)
    this.fieldInstance = new H5PEditor.widgets[this.field.type](this.parent, this.field, this.params, this.setValue);

Not sure what setValue means? If I do not change this.fieldInstance, nothing happens. Does this mean I should, inside my boilerplate widget, re-write all the contents of the h5peditor-text.js script in order to add my own input attributes?

otacke's picture

otacke

Sun, 03/13/2022 - 11:15

What do you expect to happen if you don't customize anything?

As I mentioned before, you now have access to `this.fieldInstance` which is the original internal widget (here `text` widget) that you attached the custom widget to. You can manipulate it the way that you want to, in particular set additional attributes to the text input field which is exposed as `this.fieldInstance.$input` as a jQuery object once the text input field has been attached to the DOM. Use jQuery directly, get the HTML DOM element from it if you want to, ... 

If you prefer to completely re-write the text input field, be my guest. Then you'll need to call `setValue` function that is passed to the widget by H5P core in order to inform the editor that the value inside has been updated when you think it should. Otherwise, nothing will be saved.

Cheers,
Oliver