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



  • Well, doing tests I found a simpler solution: just put the component inside a <form> tag with the attributes you want to specify for example:

    <form  autocomplete="off">
    			<q-search size="lg"  placeholder="search" clearable color="primary" v-model.trim="filterText" />
    		</form>