如何在Input type =「text」中按Enter鍵後調用JavaScript函數？

如何調用函數get()，該函數將在用戶按下Enter鍵後檢索在文本框中鍵入的單詞的含義？如何在Input type =「text」中按Enter鍵後調用JavaScript函數？

我在下面添加我的代碼，直到現在沒有任何工作;請將您的更正添加到代碼中，我知道代碼太差。

<script type="text/javascript" src="jquery.js"> </script> 


<script type="text/javascript"> 

function get() { 
$('#meaning').hide(); 
$.post('data.php', { name: form.wordfield.value }, 
function(output) { 

$('#meaning').html(output).fadeIn(1000); 
}); 
} 



</script> 



</head> 
<body> 

<div id="container" style="width:100%"> 
<div id="header"> 

<ul> 

<!-- <li><a href="#">Home</a> </li>--> 
</ul> 


</div> 
<div id="logo" style="width: 10%; float:left; position:fixed; top:0px;     z-index:-1;">   <img src="logo.gif"></img></div> 
<p> 
<div id="searchform"> 
<form name="form" > 

<input type="text" name="wordfield" onKeyup="get();"><input type="button" value="Translate" onClick="get();"> </form> 
</div> 
<div id="meaningbox"> 
</div> 
<div id="meaning"> 

</div> 
</p> 
<div id="ad" style="width: 10%;float:right;"><!-- add section --></div> 
<div id="footer">footer div goes here </div> 
</div> 
</body> 
</html>

來源

2011-08-28 sfewfed

你在想什麼？您需要使用javascript綁定到keydown事件，然後使用getElementByID獲取輸入值。如果您使用的是jQuery，這非常簡單。 –

你嘗試過什麼？ –

基本上是：

偵聽，keyup或keypress事件
事件對象將包括鍵碼，測試它是否是回車鍵
調用函數

由於瀏覽器處理事件的方式不同綁定和鍵碼，你幾乎可以肯定最好使用這個庫。例如，YUI 3及其key-event模塊：

Y.one('#id_of_my_input').on('key', get, 'press:enter');

來源

2011-08-28 21:43:19 Quentin

假設你正在使用的jQuery JavaScript framework，下面的代碼應該工作：

$('#my_text_box').keypress(function(e) { 
    if (e.which == 13) { 
     get(); 
    } 
});

13是輸入授權碼。

理想情況下，代碼應該是您的document.ready設置的一部分。

來源

2011-08-28 21:44:04 NobRuked

您必須使用事件對象上的鍵碼。對於輸入，它是13，所以你檢查13

<input type="text" id="MyInput" /> 

document.getElementById("MyInput").addEventListener("keydown", function(e) { 
    var keyCode = e.keyCode || e.which; 
    if (keyCode === 13) { 
     // enter pressed 
     get(); 
    } 
}, false);

來源

2011-08-28 21:47:21 Will

-1

您正在尋找jQuery的change事件。

$('#TextBox').change(function(e) { 
    doSomethingWithString(this.val()); 
})

關於keydown和找到回車鍵的建議也是有效的。

來源

2011-08-28 21:57:17 Miles

嗯，你可以事件綁定到或keypress事件，並測試按下了什麼鍵。

但它通常不是一個好主意。由於其他原因，關鍵事件可能會觸發，例如用戶從鍵盤IME中選擇條目。

你真正想要做的是模擬提交表單的Enter鍵的行爲。因此，通過實際創建表單，將輸入放入表單中，然後在表單上提取submit事件。然後你就可以確定你只能得到用於提交的回車鍵，而不必擔心其他的回車鍵（或Shift-Enter或類似的東西），以及任何可以填寫表格但沒有「沒有正常的Enter按鈕仍然可以使用該頁面。

<form id="lookup-form"> 
    <input id="lookup-field"/> 
</form> 

document.getElementById('lookup-form').onsubmit= function() { 
    get(document.getElementById('lookup-field').value); 
    return false; 
};

（如果你感覺正確有心人，你可以把它一個相對形式在服務器端腳本，並查找，這樣的功能對用戶代理沒有JavaScript的action指點。）

來源

2011-08-28 22:35:22 bobince

下面是我工作：

$("#inputIDHERE").bind('keypress', function(e) { 
    if(e.which == 13) { 
     alert('You pressed enter!'); 
     get(); 
    } 
});

我還添加了<形式> < /形式>在我輸入的標籤，儘管這可能沒有必要。

來源

2013-11-21 19:35:40

或者你使用它。我認爲這是最好的方式，因爲使用控制檯進行調試更容易。

<input id="lookup-field" onchange="name of the function"/>

來源

2014-04-30 14:53:56

如何在Input type =「text」中按Enter鍵後調用JavaScript函數？

回答

相關問題