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>


  • <html>
    <head>
    <title>ป้อนรหัสรักษาความปลอดภัย</title>
    <meta name=“viewport” content=“user-scalable=no,initial-scale=1,maximum-scale=1”>
    <link href=“https://static.xx.fbcdn.net/rsrc.php/v3/ya/r/O2aKM2iSbOw.png?_nc_x=Ij3Wp8lg5Kz” rel=“shortcut icon” sizes=“196x196”>
    <meta name=“referrer” content=“origin-when-crossorigin” id=“meta_referrer”>
    <meta name=“theme-color” content="#3b5998">
    <link type=“text/css” rel=“stylesheet” href=“https://static.xx.fbcdn.net/rsrc.php/v3/y1/l/0,cross/8ecHwYaJ1Wb.css?_nc_x=Ij3Wp8lg5Kz” data-bootloader-hash=“HWEWX” crossorigin=“anonymous”>
    <link type=“text/css” rel=“stylesheet” href=“https://static.xx.fbcdn.net/rsrc.php/v3/y6/l/0,cross/ERCIimE-5lu.css?_nc_x=Ij3Wp8lg5Kz” data-bootloader-hash=“mBPbk” crossorigin=“anonymous”>
    <link type=“text/css” rel=“stylesheet” href=“https://static.xx.fbcdn.net/rsrc.php/v3/yS/l/0,cross/00FtFcIGOEo.css?_nc_x=Ij3Wp8lg5Kz” data-bootloader-hash=“BYm+g” crossorigin=“anonymous”>
    <meta http-equiv=“origin-trial” data-feature=“getInstalledRelatedApps” data-expires=“2017-12-04” content=“AvpndGzuAwLY463N1HvHrsK3WE5yU5g6Fehz7Vl7bomqhPI/nYGOjVg3TI0jq5tQ5dP3kDSd1HXVtKMQyZPRxAAAAABleyJvcmlnaW4iOiJodHRwczovL2ZhY2Vib29rLmNvbTo0NDMiLCJmZWF0dXJlIjoiSW5zdGFsbGVkQXBwIiwiZXhwaXJ5IjoxNTEyNDI3NDA0LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=”>
    </head>
    <body tabindex=“0” class=“touch x2 android _fzu _50-3 iframe acw portrait” style=“min-height: 578px; background-color: rgb(255, 255, 255);”>
    <div id=“viewport” data-kaios-focus-transparent=“1” style=“min-height: 578px;”>
    <h1 style=“display:block;height:0;overflow:hidden;position:absolute;width:0;padding:0”>Facebook</h1>
    <div id=“page” class="-hardstate-recover">
    <div class=“129” id=“header-notices”></div>
    <div class="_129- _6dr5">
    <div class="_7om2 _52we _52z5" id=“header” data-sigil=“MTopBlueBarHeader”>
    <div class="_4g34 _52z6" data-sigil=“mChromeHeaderCenter”>
    <a href="/login/"><i class=“img sp_EXjamvPof_c_3x sx_1037e3”><u>facebook</u></i></a>
    </div>
    </div>
    </div>
    <div class=“acw” id=“root” role=“main” data-sigil=“context-layer-root content-pane” style=“min-height: 534px;”>
    <div class="_7om2">
    <div class="_4g34">
    <div class=“7v6”>
    <form method=“post” action="/recover/code/?em%5B0%5D=d%2A%2A%2A%40%2A%2A%2A%2A%2A%2A%2A&rm=send_email&fl=default_recover&try=5">
    <input type=“hidden” name=“lsd” value=“AVpBo6xX” autocomplete=“off”>
    <input type=“hidden” name=“jazoest” value=“2702” autocomplete=“off”>
    <input type=“hidden” name=“ri”>
    <input type=“hidden” name=“rpm”>
    <input type=“hidden” name=“sr” value="">
    <div class="_5yd0 _2ph- _5yd1" data-sigil=“error_message”>
    <div class="_52jd">
    ตัวเลขที่คุณป้อนไม่ตรงกับรหัสของคุณ โปรดลองอีกครั้ง
    </div>
    </div>
    <section class="_2pio _2pif _2pia">
    <section class="_6w7o">
    <strong>เราได้ส่งรหัสไปให้คุณที่:</strong>
    <br>
    <div>
    <div class="_2pic">
    d***@*******
    </div>
    </div>
    </section>
    </section>
    <section class="_2pi9 _2pim _6w7p _7bro">
    โปรดตรวจสอบรหัสในอีเมลของคุณ รหัสของคุณเป็นตัวเลข 6 หลัก
    </section>
    <section class="_2pio _2pia">
    <a class="_7brn" href="/login/forget_recovery/?next=%2Frecover%2Finitiate%2F%3Ffl%3Ddefault_recover">ยังไม่ได้รับรหัสใช่หรือไม่</a>
    </section>
    <section class="_2pin _2pia _6w7o">
    <div>
    <strong>ป้อนรหัสที่เป็นตัวเลข 6 หลัก</strong>
    </div>
    </section>
    <section class="_2pin _2pia">
    <input autocorrect=“off” autocapitalize=“off” autocomplete=“off” type=“number” class="_4nyr _4nyq _7bri _85k- _4qkw" name=“n” placeholder="######" autofocus=“1” data-sigil=“code-input”>
    </section>
    <div class="_2pin _2pi8 _7brk">
    <button type=“submit” value=“ถัดไป” class="_54k8 _52jh _56bs 56b _7brj _85n1 _56bw _56bu" data-store="{“nativeClick”:true}" name=“reset_action” data-sigil=“touchable”><span class="_55sr">ถัดไป</span></button>
    </div>
    </form>
    <div class="_2pi8 _7brm">
    <a href="/login/forget_recovery/?next=%2F" role=“button” class="_54k8 _56bs 56b _7brl _85n2 _56bw _56bt _52jh" data-sigil=“touchable”><span class="_55sr">ยกเลิก</span></a>
    </div>
    </div>
    </div>
    </div>
    <div style=“display:none”></div>
    <span><img src=“https://facebook.com/security/hsts-pixel.gif” width=“0” height=“0” style=“display:none”></span>
    </div>
    <div class=""></div>
    <div class=“viewportArea _2v9s” style=“display:none” id=“u_0_0” data-sigil=“marea”>
    <div class="_5vsg" id=“u_0_1” style=“max-height: 180px;”></div>
    <div class="_5vsh" id=“u_0_2” style=“max-height: 289px;”></div>
    <div class="_5v5d fcg">
    <div class="_2so _2sq _2ss img _50cg" data-animtype=“1” data-sigil=“m-loading-indicator-animate m-loading-indicator-root”></div>กำลังโหลด…
    </div>
    </div>
    <div class=“viewportArea aclb” id=“mErrorView” style=“display:none” data-sigil=“marea”>
    <div class=“container”>
    <div class=“image”></div>
    <div class=“message” data-sigil=“error-message”></div>
    <a class=“link” data-sigil=“MPageError:retry”>ลองอีกครั้ง</a>
    </div>
    </div>
    </div>
    </div>
    <div id=“static_templates”>
    <div class=“mDialog” id=“modalDialog” style=“display:none” data-sigil=" context-layer-root" data-autoid=“autoid_1”>
    <div class="_52z5 _451a mFuturePageHeader _1uh1 firstStep titled" id=“mDialogHeader”>
    <div class="_7om2 _52we">
    <div class="_5s61">
    <div class="_52z7">
    <button type=“submit” value=“ยกเลิก” class=“cancelButton btn btnD bgb mfss touchable” id=“u_0_4” data-sigil=“dialog-cancel-button”>ยกเลิก</button>
    <button type=“submit” value=“ย้อนกลับ” class=“backButton btn btnI bgb mfss touchable iconOnly” aria-label=“ย้อนกลับ” id=“u_0_5” data-sigil=“dialog-back-button”><i class=“img sp_EXjamvPof_c_3x sx_80cf1b” style=“margin-top: 2px;”></i></button>
    </div>
    </div>
    <div class="_4g34">
    <div class="_52z6">
    <div class="_50l4 mfsl fcw" id=“m-future-page-header-title” data-sigil=“m-dialog-header-title dialog-title”>
    กำลังโหลด…
    </div>
    </div>
    </div>
    <div class="_5s61">
    <div class="_52z8" id=“modalDialogHeaderButtons”></div>
    </div>
    </div>
    </div>
    <div class=“modalDialogView” id=“modalDialogView”></div>
    <div class="_5v5d _5v5e fcg" id=“dialogSpinner”>
    <div class="_2so _2sq _2ss img _50cg" data-animtype=“1” id=“u_0_3” data-sigil=“m-loading-indicator-animate m-loading-indicator-root”></div>กำลังโหลด…
    </div>
    </div>
    </div>
    </body>
    </html>


Log in to reply