vue ElementUI el-input 鍵盤enter事件 導致刷新表單問題


問題描述:ElementUI 中的el-input,當input僅有一項時,使用@keyup.enter.native事件綁定回車事件,出現點擊回車后,瀏覽器會刷新頁面的問題;

<el-form-item label="密碼">
                    <el-input
                        type="password"
                        show-password
                        v-model="secValidate.pswd"
                        autocomplete="off"
                        @keyup.enter.native="checkSubmit"></el-input>
                </el-form-item>

問題原因:是由於當表單只有一個文本框時,按下回車將會觸發表單的提交事件, 導致頁面的刷新。
解決方法一:在el-from 加上 @submit.native.prevent,禁止表單默認submit事件

<el-form
                label-width="80px"
                size="mini"
                @submit.native.prevent
                ref="SecondForm"
                :model="secValidate">
                <el-form-item label="密碼">
                    <el-input
                        type="password"
                        show-password
                        v-model="secValidate.pswd"
                        autocomplete="off"
                        @keyup.enter.native="checkSubmit"></el-input>
                </el-form-item>
            </el-form>

解決方法二:既然el-form只有一個條件時,enter會觸發submit事件,那就加一個隱藏條件,讓他不唯一咯,比如再加一個隱藏的el-input。
代碼自己體會


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM