vue+element Form鍵盤迴車事件頁面重新整理解決

阿新 • • 發佈：2018-12-20

問題描述：如下程式碼所示，使用element-ui 中的el-form元件對table進行條件查詢，當查詢條件僅有一項時，使用@keyup.enter.native事件繫結回車事件，出現點選回車後，瀏覽器會重新整理頁面的問題；


&lt;el-form :inline="true"  class="demo-form-inline"&gt;
    &lt;el-form-item label="基金名稱:" style="margin-bottom:0"&gt;
    &lt;el-input placeholder="基金名稱" @keyup.enter.native="doFilter(5)"  v-model="likeName"&gt;&lt;/el-input&gt;
    &lt;/el-form-item&gt;
    &lt;el-form-item style="margin-bottom:0"&gt;
    &lt;el-button class="btnCheck" @click="doFilter(5)"  style="margin-bottom:0"&gt;查詢&lt;/el-button&gt;
    &lt;/el-form-item&gt;
 &lt;/el-form&gt;

搜尋了問題觸發原因，是由於當表單只有一個文字框時，按下回車將會觸發表單的提交事件，導致頁面的重新整理。

解決方案一：加一個隱藏的文字框，即表單不只有一個文字框，如下：


&lt;el-form :inline="true"  class="demo-form-inline" &gt;
    &lt;el-form-item label="基金名稱:" style="margin-bottom:0"&gt;
    &lt;el-input placeholder="基金名稱" @keyup.enter.native="doFilter(5)"  v-model="likeName"&gt;&lt;/el-input&gt;
    &lt;/el-form-item&gt;
    &lt;el-form-item style="margin-bottom:0;display:none;"&gt;
    &lt;el-input @keyup.enter.native="doFilter(5)"&gt;&lt;/el-input&gt;
    &lt;/el-form-item&gt;
    &lt;el-form-item style="margin-bottom:0"&gt;
    &lt;el-button class="btnCheck" @click="doFilter(5)"  style="margin-bottom:0"&gt;查詢&lt;/el-button&gt;
    &lt;/el-form-item&gt;
&lt;/el-form&gt;

element官方解決方案：在el-from 加上 @submit.native.prevent


&lt;el-form :inline="true"  class="demo-form-inline"  @submit.native.prevent&gt;
    &lt;el-form-item label="基金名稱:" style="margin-bottom:0"&gt;
    &lt;el-input placeholder="基金名稱" @keyup.enter.native="doFilter(5)"  v-model="likeName"&gt;&lt;/el-input&gt;
    &lt;/el-form-item&gt;
    &lt;el-form-item style="margin-bottom:0"&gt;
    &lt;el-button class="btnCheck" @click="doFilter(5)"  style="margin-bottom:0"&gt;查詢&lt;/el-button&gt;
    &lt;/el-form-item&gt;
&lt;/el-form&gt;

以上兩種方案均可解決。

來源：https://segmentfault.com/a/1190000016034270

vue+element Form鍵盤迴車事件頁面重新整理解決

問題描述：如下程式碼所示，使用element-ui 中的el-form元件對table進行條件查詢，當查詢條件僅有一項時，使用@keyup.enter.native事件繫結回車事件，出現點選回車後，瀏覽器會重新整理頁面的問題； <el-form :inline="true" class="

vue 監聽鍵盤迴車事件詳解 @keyup.enter || @keyup.enter.native

vue執行為v-on在監聽鍵盤事件時，添加了特殊的鍵盤修飾符： <input v-on:keyup.13="submit"> vue還非常貼心地給出了常用按鍵的別名，這樣就不必去記keyCode ~ ~ 上面程式碼，還可以在這樣寫： <input v-on:keyu

vue+element 鍵盤迴車事件導致頁面重新整理的問題

背景今天發現輸入框輸入內容後回車就會重新整理頁面解決 <el-form :inline="true" @submit.native.prevent> </el-form> el-from 加上 @submi

vue+element Form鍵盤回車事件頁面刷新解決

ace for code com fault key item filter submit 問題描述：如下代碼所示，使用element-ui 中的el-form組件對table進行條件查詢，當查詢條件僅有一項時，使用@keyup.enter.native事件綁定回車事件，出

vue 鍵盤迴車事件

如果是原生的input，使用 @keyup.enter就可以，若是使用了element-ui，則要加上native限制符，因為element-ui把input進行了封裝，原事件就不起作用了，程式碼如下： <input v-model="form.name" placeholder="暱稱" @keyu

Android監聽軟鍵盤迴車事件

在Android開發中，難免會碰到一些”意外“。比如輸入法軟按鍵監聽問題，因為第三方輸入法各有不同（對一些按鍵事件作了一些特殊的處理），所以有時有些程式碼會“失靈”。假設一個場景，EditText監聽回車事件，回車後就傳送輸入的內容，一般有以下4種處理方式：假設場景圖：

Android如何將軟鍵盤迴車換成搜尋等按鈕，EditText中imeOptions屬性的使用

一、效果圖如上圖，在使用鍵盤輸入的時候，有時我們可以看到回車鍵是“下一步”、“搜尋”、“確認”等，那麼這個效果要怎麼做呢？其實很簡單，我們只需要在EditText中設定imeOptions這個屬性就行了。 <EditText androi

Android Edittext改變鍵盤迴車為搜尋

做搜尋功能的時候遇到的坑，網上都是android:imeOptions=”actionSearch”，但是對Edittext不起作用，鍵盤上的回車鍵不變。 android:singleLine="true" android:imeOptions="actionSear

android呼叫輸入軟鍵盤迴車鍵跟刪除鍵

android EditText控鍵在呼叫軟鍵盤的時候功能實現: 1、Editext 實現繫結輸入法回車鍵程式碼實現 password.setOnEditorActionListener(new EditText.OnEditorActionListener() {

解決Android EditText或者AppCompatEditText按軟鍵盤迴車只是換行的問題

Android中使用EditText或者android.support.v7.widget.AppCompatEditText輸入時預設的軟鍵盤的回車鍵只是用於換行，這會導致使用者誤按回車導致EditTex輸入區域變寬，UI變形的BUG情況，度娘上的回答都是讓設定EditText

android監聽軟鍵盤迴車鍵並且解決預設點選兩次的問題

@Override public boolean dispatchKeyEvent(KeyEvent event) { if(event.getKeyCode()==KeyEvent.KEYCODE_ENTER&&event.getActio

Android開發匹配軟鍵盤迴車鍵

在android開發過程中，有時候需要對EditText的軟鍵盤進行監聽。當點選軟鍵盤迴車位置按鍵的時候，需要實現完成、前進、下一項、搜尋、傳送或其他功能。這就需要開發者對軟鍵盤迴車的點選事件進行捕捉。 1. 我們需要先在XML檔案中設定EditText的

VUE 中使用 iview Form元件 enter鍵防止頁面重新整理

<Form ref="searchFilterDiv" :model="searchFilter" :rules="ruleValidate" inline @keydown.native.e

java 焦點在按鈕上鍵盤迴車，等同於滑鼠單擊它

簡單例子import javax.swing.*;import java.awt.*;import java.awt.event.*;public class MyTest extends JFrame implements KeyListener,ActionListene

【Android】EditText實現搜尋功能，把鍵盤迴車鍵改為搜尋；EditText隱藏游標

1、xml檔案中設定屬性 android:imeOptions="actionSearch" android:singleLine="true" 注：android:singleLine 已過期，不過設定為maxlines = 1 不會將回

Android知識點——更改軟鍵盤迴車鍵

積跬步，以至千里；積小流，以成江海。場景：當點選搜尋框，或者聊天訊息框是，會看到軟鍵盤的回車鍵變成“搜尋”或者“傳送”提醒。實現如上需求，必然需要使用EditText的幾個屬性 android:imeActionId=”3” and

vue 生產環境build打包出現空白頁面的解決方法

uil run conf htm clas -c hunk con npm vue 生產環境build打包出現空白頁面的解決方法：如果出現：webpackjsonp is not defined 因為公共文件必須在引用js之前引用。只需要在build 文件下webpack

frameset 將截斷鍵盤和滑鼠事件的問題解決辦法

最近發現一個網頁程式的Bug, 我的主頁面引用了一個 IFrame, 而IFrame裡面有 Frameset 的兩個Frame. 主頁面是有滾動條的, 但是在 FrameSet 的 frame獲得焦點時, 無法將鍵盤(上,下鍵)或者滑鼠中鍵訊息傳遞給主頁面, 導致無

分享一個 Vue Element-ui 的兩級checkbox動態渲染解決方案

以下是實現方案使用資料控制checkbox的勾選狀態，感覺這種方式不同於jquery的直接操作DOM，剛剛開始使用真的搞不懂，思路一時轉不過來，遇到同樣問題的同學可以參考我這個做法，有疑問的同學可以留言。 <template> <div class="

VUE enter 回車導致頁面重新整理解決

分頁中需要輸入頁碼進行跳轉，但是卻出現跳到指定頁面後，頁面也重新整理了。從而無法滿足無重新整理的分頁。最初程式碼如下: <form class="zh-skip" action="">

vue+element Form鍵盤迴車事件頁面重新整理解決

相關推薦