javascript - tutorial - w3school html




如何捕獲Enter鍵按? (8)

形式方法

正如scoota269所說,你應該使用onSubmit代替,導致在文本框上按下輸入最可能觸發表單提交(如果在表單內)

<form action="#" onsubmit="handle">
    <input type="text" name="txt" />
</form>

<script>
    function handle(e){
        e.preventDefault(); // Otherwise the form will be submitted

        alert("FORM WAS SUBMITTED");
    }
</script>

文本框方法

如果你想在輸入字段上有一個事件,那麼你需要確保你的handle()將返回false,否則表單將被提交。

<form action="#">
    <input type="text" name="txt" onkeypress="handle(event)" />
</form>

<script>
    function handle(e){
        if(e.keyCode === 13){
            e.preventDefault(); // Ensure it is only this code that rusn

            alert("Enter was pressed was presses");
        }
    }
</script>

在我的HTML頁面中,我有一個文本框供用戶輸入搜索關鍵字。 當他們單擊搜索按鈕時,JavaScript函數將生成一個URL並在新窗口中運行。

當用戶通過鼠標單擊搜索按鈕時,JavaScript函數可正常工作,但當用戶按下ENTER鍵時沒有響應。

function searching() {            
            var keywordsStr = document.getElementById('keywords').value;
            var cmd ="http://XXX/advancedsearch_result.asp?language=ENG&+"+ encodeURI(keywordsStr) + "&x=11&y=4";
            window.location = cmd;
        }

    <form name="form1" method="get">
             <input name="keywords" type="text" id="keywords" size="50" >
             <input type="submit" name="btn_search" id="btn_search" value="Search" 
onClick="javascript:searching(); return false;" onKeyPress="javascript:searching(); return false;">
             <input type="reset" name="btn_reset" id="btn_reset" value="Reset">
    </form>

一點點通用jQuery給你..

$('div.search-box input[type=text]').on('keydown', function (e) {
    if (e.which == 13) {
        $(this).parent().find('input[type=submit]').trigger('click');
        return false;
     }
});

這適用於假定文本框和提交按鈕包裝在同一個div上。 在頁面上使用多個搜索框進行處理



使用onkeypress 。 檢查按下的鍵是否輸入(keyCode = 13)。 如果是,請調用searching()函數。

HTML

<input name="keywords" type="text" id="keywords" size="50"  onkeypress="handleKeyPress(event)">

JAVASCRIPT

function handleKeyPress(e){
 var key=e.keyCode || e.which;
  if (key==13){
     searching();
  }
}

這是一個顯示它在行動的片段:

document.getElementById("msg1").innerHTML = "Default";
function handle(e){
 document.getElementById("msg1").innerHTML = "Trigger";
 var key=e.keyCode || e.which;
  if (key==13){
     document.getElementById("msg1").innerHTML = "HELLO!";
  }
}
<input type="text" name="box22" value="please" onkeypress="handle(event)"/>
<div id="msg1"></div>


容易舔冰淇淋,讓我們假設:

您之前的頁面:

<body>

你現在的頁面:

<body onkeypress=if(event.keyCode==13)alert('hi')>

這是一個簡單的例子; 我假設你的頁面有一個簡單的正文標籤,如果你插入這個單獨的onkeypress函數,那就意味著每當你按下ENTER鍵時,警報會彈出[在.keyCode == 13之後使用任何東西]]

所以用這個替換你的BODY標籤並點擊ENTER進行測試,你會看到它正常工作


您需要為onkeypress操作創建一個處理程序。

HTML

<input name="keywords" type="text" id="keywords" size="50" onkeypress="handleEnter(this, event)" />

JS

function handleEnter(inField, e)
{
    var charCode;

    //Get key code (support for all browsers)
    if(e && e.which)
    {
        charCode = e.which;
    }
    else if(window.event)
    {
        e = window.event;
        charCode = e.keyCode;
    }

    if(charCode == 13)
    {
       //Call your submit function
    }
}

	// jquery press check by Abdelhamed Mohamed


    $(document).ready(function(){
    $("textarea").keydown(function(event){
        if (event.keyCode == 13) {
         // do something here
         alert("You Pres Enter");
        }
       });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <textarea></textarea>


<form action="#">
    <input type="text" id="txtBox" name="txt" onkeypress="handle" />
</form>






<script>
    $("#txtBox").keypress(function (e) {
            if (e.keyCode === 13) {
                alert("Enter was pressed was presses");
            }

            return false;
        });

    </script>




onkeypress