q-input turn off spellcheck, capitalization, autocorrect



  • How can one turn off these values in q-input text fields? I have tried the following but it does not work:

    <q-input v-model="user.username" float-label="Username" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
    
    

    Whereas a plain text field DOES work:

    <input autocomplete="off" autocorrect="off" autocapitalize="off" type="text" name="somename"  spellcheck="false">
    


  • Maybe fields should have a generic way to add html attributes? Or is there already?



  • Well, I had to modify quasar.esm.js in the following way, but I can now specify these extra params.

    In the line (near 1696) that begins with var QInput, find this pattern:

    class:[("text-" + (_vm.align))],attrs:{"name":_vm.name,

    REPLACE that part with:

    class:[("text-" + (_vm.align))],attrs:{"autocomplete":_vm.autocomplete,"autocorrect":_vm.autocorrect,"autocapitalize":_vm.autocapitalize,"spellcheck":_vm.spellcheck,"name":_vm.name,

    THEN find the the block that looks like this:

    var InputMixin = {
      props: {
        autofocus: Boolean,
        name: String,
        maxLength: [Number, String],
        maxHeight: Number,
        placeholder: String,
        loading: Boolean
    

    and REPLACE it with this:

    var InputMixin = {
      props: {
        autofocus: Boolean,
        name: String,
        maxLength: [Number, String],
        maxHeight: Number,
        placeholder: String,
        loading: Boolean,
        autocapitalize: String,
        autocomplete: String,
        autocorrect: String,
        spellcheck: String
    

    Voila, you can now add those to an input to turn off any or all of those values


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.