用戶按下輸入文本框中的JQuery事件？

374

您可以連接你自己的自定義事件

$('textarea').bind("enterKey",function(e){ 
    //do stuff here 
}); 
$('textarea').keyup(function(e){ 
    if(e.keyCode == 13) 
    { 
     $(this).trigger("enterKey"); 
    } 
});

http://jsfiddle.net/x7HVQ/

來源

2011-06-29 16:51:02

+5

值得一提的是，在一個場景輸入檢測以防止fo rm提交，「keyup」事件不是最優的，因爲表單檢測到keydown上的提交。因此，在這種情況下，「keydown」或「keypress」可能會更好。 – TechNyquist

+0

請注意，bind（）在jQuery 3.0中已棄用。 –

33

這裏是一個插件，爲您提供：（小提琴：http://jsfiddle.net/maniator/CjrJ7/）

$.fn.pressEnter = function(fn) { 

    return this.each(function() { 
     $(this).bind('enterPress', fn); 
     $(this).keyup(function(e){ 
      if(e.keyCode == 13) 
      { 
       $(this).trigger("enterPress"); 
      } 
     }) 
    }); 
}; 

//use it: 
$('textarea').pressEnter(function(){alert('here')})

來源

2011-06-29 17:08:08 Neal

+0

不錯。比我發佈的URL簡單得多。我想知道我發佈的文章到底是什麼，爲什麼它需要這麼多的代碼。 – CaptSaltyJack

+1

太晚了，我已經寫了我自己的：P。它也可以在較少的行中完成相同的工作。另外，爲插件使用'$'變量不是一個好主意，因爲它可能會導致衝突。 –

+0

@ClickUpvote，將它封裝在閉包中應該修復 – Neal

15

繼承人一個jQuery插件，這樣做

(function($) { 
    $.fn.onEnter = function(func) { 
     this.bind('keypress', function(e) { 
      if (e.keyCode == 13) func.apply(this, [e]);  
     });    
     return this; 
    }; 
})(jQuery);

使用它，包括代碼，並設置它是這樣的：

$(function() { 
    console.log($("input")); 
    $("input").onEnter(function() { 
     $(this).val("Enter key pressed");     
    }); 
});

jsfiddle of it here http://jsfiddle.net/VrwgP/30/

來源

2011-06-29 17:10:36 jzilla

+1

不錯，我會使用'func.apply（this）'調用回調函數，這樣在回調函數內部，您可以像使用'this'那樣正常訪問觸發事件的元素。 –

+0

是的，關於func.apply（這個）的好點，甚至沒有考慮過。 – jzilla

+0

不錯，簡潔，但我會補充說，停止傳播和默認值在大多數情況下是一個好主意，以防止任何表單提交。只需添加'''e.preventDefault（）; e.stopPropagation（）;'''if（e.keyCode）''內的''''。 –

62

$('#textbox').on('keypress', function (e) { 
     if(e.which === 13){ 

      //Disable textbox to prevent multiple submit 
      $(this).attr("disabled", "disabled"); 

      //Do Stuff, submit, etc.. 

      //Enable the textbox again if needed. 
      $(this).removeAttr("disabled"); 
     } 
    });

來源

2012-03-27 16:01:18

+6

謝謝 - 此解決方案符合我的使用案例。但值得注意的是，一旦完成任何處理，您可能需要添加'$（this）.removeAttr（「disabled」）;'以重新啓用文本框。 – misterjaytee

6

應該以及注意，在jQuery的使用live()一直廢棄的自版本1.7以來已刪除 jQuery 1.9。相反，推薦使用on()。

我會強烈建議採用下列方法進行結合，因爲它解決了以下潛在的挑戰：

通過事件綁定到document.body和傳球$選擇作爲第二個參數on()，元素可以安裝，分離，添加或從DOM中刪除，而無需處理重新綁定或雙重綁定事件。這是因爲事件直接附加到document.body而不是$selector，這意味着$selector可以被添加，刪除並再次添加，並且永不加載綁定到它的事件。
通過在on()之前調用off()，該腳本可以存在於頁面的主體內，也可以存在於AJAX調用的主體內，而不必擔心偶然發生的雙重綁定事件。
通過在$(function() {...})內包裝腳本，該腳本可以再次被頁面主體或AJAX調用的主體加載。 $(document).ready()不會因爲AJAX請求而被解僱，而$(function() {...})會被解僱。

下面是一個例子：

<!DOCTYPE html> 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
     var $selector = $('textarea'); 

     // Prevent double-binding 
     // (only a potential issue if script is loaded through AJAX) 
     $(document.body).off('keyup', $selector); 

     // Bind to keyup events on the $selector. 
     $(document.body).on('keyup', $selector, function(event) { 
      if(event.keyCode == 13) { // 13 = Enter Key 
      alert('enter key pressed.'); 
      } 
     }); 
     }); 
    </script> 
    </head> 
    <body> 

    </body> 
</html>

來源

2013-11-05 16:21:14

+0

那應該是event.keyCode == 13 – jasonmcclurg

+0

是真的，並且是固定的。 –

0

另一個微妙的變化。我去權力稍微分開，所以我有一個插件，使捕獲回車鍵，然後我就綁定到事件正常：

(function($) { $.fn.catchEnter = function(sel) { 
    return this.each(function() { 
     $(this).on('keyup',sel,function(e){ 
      if(e.keyCode == 13) 
       $(this).trigger("enterkey"); 
     }) 
    }); 
}; 
})(jQuery);

然後使用：

$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });

這變體允許您使用事件委託（綁定到尚未創建的元素）。

$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });

來源

2014-04-25 15:16:44 Wilco

2

HTML代碼： -

<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />  

<input type="button" id="btnclick">

Java腳本代碼

function AddKeyPress(e) { 
     // look for window.event in case event isn't passed in 
     e = e || window.event; 
     if (e.keyCode == 13) { 
      document.getElementById('btnEmail').click(); 
      return false; 
     } 
     return true; 
    }

您的窗體沒有默認提交按鈕

來源

2016-06-01 04:49:59

用戶按下輸入文本框中的JQuery事件？

回答

相關問題