form表單input回車提交問題

来源:https://www.cnblogs.com/gxp69/archive/2019/11/11/11837015.html
-Advertisement-
Play Games

問題:文本框輸入完成後點擊回車頁面刷新問題出在form上,當表單中只有一個文本框的時候獲取焦點並點擊回車之後會提交表單內容,就會發生刷新事件。 解決方法: 1、增加一個隱藏的輸入框 增加了一個隱藏的輸入框之後,表單的文本框不再是唯一的,回車不會觸發提交事件 2、去掉輸入框的回車事件 但是有的需求又要 ...


問題:文本框輸入完成後點擊回車頁面刷新
問題出在form上,當表單中只有一個文本框的時候獲取焦點並點擊回車之後會提交表單內容,就會發生刷新事件。

解決方法:

1、增加一個隱藏的輸入框

<input itype="text" style="display:none" />

增加了一個隱藏的輸入框之後,表單的文本框不再是唯一的,回車不會觸發提交事件

2、去掉輸入框的回車事件

<input type="text"  onkeydown="return ClearSubmit(event)" />
function ClearSubmit(e) {
    if (e.keyCode == 13) {
        return false;
    }
}

但是有的需求又要有回車事件,視情況選擇

3、阻止表單預設提交事件

如果 onsubmit 句柄返回 fasle,表單的元素就不會提交。如果該函數返回其他值或什麼都沒有返回,則表單會被提交。

        由於 onsubmit 句柄可以取消表單的提交,所以它對於進行表單驗證是十分理想的;

        這樣的話,修改form的onsubmit事件可以讓敲入回車的時候執行我們想要的操作而不跳轉到action所指定的url,如下

<form action="myurl" onSubmit="fun1();return false;">

  

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

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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL事務 事務存在的原因 事務存在的目的:保證用戶對數據操作對數據是安全的。(比如說銀行卡餘額) 事務的特性——ACID 原子性:一個事務要麼全部執行,要麼不執行 一致性:事務開始和結束時,數據保持一致 隔離性:事務之間互不影響 持久性:事務操作的結果具有持久性 關於臟讀,不可重覆讀,幻讀 臟 ...
  • 記錄一個清除MySQL里binlog日誌的命令,可用在定時任務腳本里。 只保留1天前的日誌: PURGE MASTER LOGS BEFORE DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY) ...
  • 本文使用版本基於elasticsearch 6.4.0 1、什麼是ES? 官網: "https://www.elastic.co/products/elasticsearch" 中文官網:https://www.elastic.co/cn/products/elasticsearch ES是一個全文 ...
  • You have a scheduler job that generated an error. When the error occurred, you attempted to disable the job to investigate the error, but received an ...
  • 我們的數據中台在最近兩年發展得更有體系了,這與公司裂變、業務規模激增引發的,當然也跟我們高屋建瓴、高舉高打分不開。 ...
  • 本文整理了前端工程師斬獲BATTMD大廠的一些秘訣,從前端知識體系、電腦網路、操作系統、數據結構與演算法、編程題與分析題等八大部分 整理了前端工程師在秋招面試過程中必備的知識點,相信大家只要掌握了這其中的重要知識點,並有相關的項目經驗作為支撐,必定會收到理想的Offer,最後把筆者秋招過程中整理的這 ...
  • 下麵介紹Element-ui中Upload組件如何把圖片上傳的七牛雲(免費版本,有流量限制) 一、準備工作 1.去七牛雲註冊賬號,並實名認證,不認證無法創建存儲空間 2.瞭解Element-ui組件 二、創建上傳頁面(這裡直接使用官方的代碼片段) 三、上傳憑證(Token)如何獲得:https:// ...
  • 網頁加入視頻可以用h5自帶的video標簽,這裡用一個jQuery封裝優化好的video視頻組件videojs。 videojs官方網站:https://docs.videojs.com/index.html videojs下載:https://github.com/videojs/video.js ...
一周排行
    -Advertisement-
    Play Games
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊,後續可能不再更新Garne ...
  • C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了,幾乎是無縫銜接,很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高,我只要會調用方法就行。這個系統交付之後不會有太多問題,更多應該是做小需求,有大的開發任務應該也是第二期的事,嗯?怎麼感覺我變成運維了?而 ...
  • 我在隨筆《EAV模型(實體-屬性-值)的設計和低代碼的處理方案(1)》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼(或者說無代碼)的一些實現思路,在本篇隨筆中,我們來分析一下這種針對通用業務,且只需定義就能構建業務模塊存儲和界面的解決方案,其中的數據查詢處理的操作。 ...
  • 對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1,這將啟用NTP伺服器功 ...
  • title: Django信號與擴展:深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分:Django信號基礎 Djan ...
  • 使用xadmin2遇到的問題&解決 環境配置: 使用的模塊版本: 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 今天我打算整點兒不一樣的內容,通過之前學習的TransformerMap和LazyMap鏈,想搞點不一樣的,所以我關註了另外一條鏈DefaultedMap鏈,主要調用鏈為: 調用鏈詳細描述: ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 後端應用級開發者該如何擁抱 AI GC?就是在這樣的一個大的浪潮下,我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型,跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好,或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • @Autowired是Spring框架提供的註解,@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配,而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean,而@Resourc... ...