快捷導(dǎo)航

layer的prompt彈出框,點(diǎn)擊回車,觸發(fā)確定事件的方法

更新時(shí)間：2019年09月06日 15:57:09 作者：海月心明

今天小編就為大家分享一篇layer的prompt彈出框,點(diǎn)擊回車,觸發(fā)確定事件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

做了個(gè)prompt彈出框，希望點(diǎn)擊確定按鈕的時(shí)候也能觸發(fā)確定的事件，用戶習(xí)慣的原因，在輸入框輸入框數(shù)據(jù)后，再重新拿起鼠標(biāo)點(diǎn)擊太麻煩，所以想著點(diǎn)擊確定按鈕觸發(fā)事件。

layer.prompt({title: '請(qǐng)輸入數(shù)據(jù)', formType: 1,
 // 這個(gè)是確定按鈕的事件
 "success":function(){
 // 鍵盤事件，判斷回車
 $("input.layui-layer-input").on('keydown',function(e){
  if (e.which == 13) {
  // 取輸入框數(shù)據(jù) 和123456 比較
  if("123456" == $(this).val()){
  alert('你點(diǎn)擊了回車按鈕！');
  layer.close(1);
  }
     }
 });
 },
 // 點(diǎn)擊確定按鈕事件
 yes : function(){
 // 取輸入框數(shù)據(jù)
 var pass =$(document.getElementsByClassName('layui-layer-input')[0]).val();
 if("123456" == pass){
  alert('你點(diǎn)擊了確定按鈕!');s
  layer.close(1);
 }
 }
 });

這個(gè)方法必須要有yes，下面一個(gè)是網(wǎng)上找的代碼，不過(guò)不好用

layer.prompt({title: '請(qǐng)輸入數(shù)據(jù)！', formType: 1,
 "success":function(){
 $("input.layui-layer-input").on('keydown',function(e){
 if (e.which == 13) {
  console.log(e.which);
  if("123456" == $(this).val()){
  alert('回車');
  layer.close(1);
  }
    } 
 });
 }}, 
 function(pass, index){
 console.log(index);
 if("123456" == pass){
 alert('確定按鈕');
 }
 layer.close(index);
 });

這個(gè)方法之所以不行，是因?yàn)辄c(diǎn)擊確定事件后，也會(huì)調(diào)用success的回調(diào)事件，而這個(gè)事件中this是不一樣的，所以 $(this).val() 會(huì)報(bào)錯(cuò)，所以我采用的方法是把確定按鈕的回調(diào)事件單獨(dú)寫出來(lái) （yes），這樣就不會(huì)導(dǎo)致沖突了。

以上這篇layer的prompt彈出框,點(diǎn)擊回車,觸發(fā)確定事件的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js控制滾動(dòng)條滾動(dòng)的兩種簡(jiǎn)單方法
這篇文章主要給大家介紹了關(guān)于js控制滾動(dòng)條滾動(dòng)的兩種簡(jiǎn)單方法,通過(guò)JavaScript可以直接控制滾動(dòng)條的位置,從而達(dá)到鎖定滾動(dòng)條的效果,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07
layui 實(shí)現(xiàn)表格某一列顯示圖標(biāo)
今天小編就為大家分享一篇layui 實(shí)現(xiàn)表格某一列顯示圖標(biāo)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
JS TextArea字符串長(zhǎng)度限制代碼集合
因?yàn)闃I(yè)務(wù)需求今天做了一個(gè)textarea文本域字符串長(zhǎng)度限制的方法，其實(shí)網(wǎng)上已經(jīng)有了很多相關(guān)的解決方案，但在輸入日語(yǔ)時(shí)，在IE存在BUG，我的這個(gè)版本就是針對(duì)這種情況的
2012-10-10
javascript中對(duì)變量類型的判斷方法
在JavaScript中，有5種基本數(shù)據(jù)類型和1種復(fù)雜數(shù)據(jù)類型，基本數(shù)據(jù)類型有：Undefined, Null, Boolean, Number和String；復(fù)雜數(shù)據(jù)類型是Object，Object中還細(xì)分了很多具體的類型，比如：Array, Function, Date等等
2015-08-08
JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三)：鏈表
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三)：鏈表,本文分別講解了單鏈表與雙鏈表以及增加節(jié)和刪除節(jié)的代碼實(shí)例,需要的朋友可以參考下
2015-06-06
javascript 不停(setInterval)/延時(shí)(setTimeout)函數(shù)使用實(shí)例
如果想實(shí)現(xiàn)頁(yè)面的一些函數(shù)的定時(shí)執(zhí)行，需要用到下面的函數(shù)大家可以看下用法。
2009-08-08
JS遍歷對(duì)象屬性的方法示例
這篇文章主要介紹了JS遍歷對(duì)象屬性的方法,涉及JS針對(duì)頁(yè)面元素屬性遍歷操作的相關(guān)技巧,需要的朋友可以參考下
2017-01-01
js模式化窗口問題![window.dialogArguments]
這篇文章主要介紹了js模式化窗口問題![window.dialogArguments],需要的朋友可以參考下
2016-10-10
javascript單例模式與策略模式實(shí)例詳解
這篇文章主要介紹了javascript單例模式與策略模式,結(jié)合實(shí)例形式詳細(xì)分析了javascript單例模式與策略模式基本概念、功能、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2023-06-06
微信小程序?qū)崿F(xiàn)云開發(fā)上傳文件、圖片功能
在使用小程序的過(guò)程中,在編輯個(gè)人資料時(shí),通常會(huì)面臨上傳頭像、上傳背景圖片的情況,而這個(gè)開發(fā)過(guò)程需要怎樣實(shí)現(xiàn)呢?這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)云開發(fā)上傳文件、圖片功能的相關(guān)資料,需要的朋友可以參考下
2022-12-12