瀏覽器默認回車事件

 今天項目發版,遇到一個抓狂問題:

如下的表單,沒有綁定回車事件,但是隻要點擊回車會重新加載頁面。無論使用什麼方法去限制回車事件都無濟於事。

<el-form @submit.prevent="onSubmit" :model="form" ref="formRef" :rules="rules1">
            
            <div class="el-message-box__content validTagName" style="margin-top: 0px;">
                <div class="el-message-box__message">
                    <!-- v-bind:manual=true v-bind:disabled="validateStatus" :value="validateStatus1" :v-model="validateStatus1"-->
                    <el-form-item prop="tagName">
                        <el-tooltip class="item" :content="errorMessage" :manual="true" :value="papor" placement="top">
                            <el-input v-model="form.tagName" class="tag-cursor"  placeholder="請輸入不多於10個長度的標籤名"  size="small"></el-input>
                        </el-tooltip>
                        <div class="el-message-box__btns" style="text-align: center;padding-top: 13px;">
                            <el-button type="default" size="small" @click.native="noSure">取消</el-button>
                            <el-button type="primary" size="small" @click.native="sure" style="margin-left: 0px;">確定</el-button>
                        </div>
                    </el-form-item>
                </div>
            </div>
        </el-form>

 最後公司大神給出解釋

form表單中如果只有一個input輸入框,瀏覽器默認會將回車事件綁定爲submit。

解決辦法:

在表單內添加一個隱藏的input即可

<input type="text" style="display:none;">

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章