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

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

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

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

layer.prompt({title: '請(qǐng)輸入數(shù)據(jù)', formType: 1,
 // 這個(gè)是確定按鈕的事件
 "success":function(){
 // 鍵盤(pán)事件，判斷回車(chē)
 $("input.layui-layer-input").on('keydown',function(e){
  if (e.which == 13) {
  // 取輸入框數(shù)據(jù) 和123456 比較
  if("123456" == $(this).val()){
  alert('你點(diǎn)擊了回車(chē)按鈕！');
  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('回車(chē)');
  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ú)寫(xiě)出來(lái) （yes），這樣就不會(huì)導(dǎo)致沖突了。

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

您可能感興趣的文章:

相關(guān)文章

給超鏈接添加特效鼠標(biāo)移動(dòng)展示提示信息且隨鼠標(biāo)移動(dòng)
需要實(shí)現(xiàn)這樣的效果，就是給超鏈接添加特效當(dāng)鼠標(biāo)移動(dòng)到上展示提示信息且提示信息跟隨鼠標(biāo)移動(dòng)，經(jīng)測(cè)試還不錯(cuò)，感興趣的朋友可以參考下
2013-10-10
element-plus 官方表格排序問(wèn)題小結(jié)
在使用Element Plus官方API時(shí),表格默認(rèn)排序可能會(huì)遇到問(wèn)題,一個(gè)列表可能被多次排序影響數(shù)據(jù)展示,解決方法是修改useSortTable.js文件,這樣可以確保表格按預(yù)期正確排序,更多詳情可查閱相關(guān)的技術(shù)文檔或資源
2024-10-10
webpack 1.x升級(jí)過(guò)程中的踩坑總結(jié)大全
webpack1已結(jié)不再維護(hù)了，官方在主推webpack2，最近在升級(jí)webpack過(guò)程中遇到了不少的問(wèn)題，所以下面這篇文章主要給大家總結(jié)了一些在webpack 1.x升級(jí)過(guò)程中的遇到的坑，以及詳細(xì)的解決方法，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-08-08
javascript 像素拼圖實(shí)現(xiàn)代碼
非常不錯(cuò)的像素拼圖效果
2009-04-04
JavaScript實(shí)現(xiàn)圖片自動(dòng)加載的瀑布流效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片自動(dòng)加載的瀑布流效果的相關(guān)資料,需要的朋友可以參考下
2016-04-04
c#程序員對(duì)TypeScript的認(rèn)識(shí)過(guò)程
本文向大家詳細(xì)展示了從C#程序員的視角學(xué)習(xí)TypeScript的過(guò)程，主要是針對(duì)這兩種語(yǔ)言的異同進(jìn)行了簡(jiǎn)單的對(duì)比學(xué)習(xí)，希望對(duì)大家能夠有所幫助。
2015-06-06
使用insertAfter()方法在現(xiàn)有元素后添加一個(gè)新元素
為javascript添加insertAfter()方法即在現(xiàn)有元素后添加一個(gè)新元素，示例如下，大家不妨學(xué)習(xí)下
2014-05-05
清空代碼防止查看源代碼的js代碼
清空代碼防止查看源代碼的js代碼...
2007-07-07
JS替換字符串中空格方法
這篇文章主要介紹了JS替換字符串中&nbsp方法，非常的簡(jiǎn)單實(shí)用，附上各種示例代碼，有需要的小伙伴可以參考下。
2015-04-04
js實(shí)現(xiàn)時(shí)分秒倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)時(shí)分秒倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12