[英]Too fast JavaScript function
我是JavaScript的新手,我正在嘗試使用一些搜索功能來處理少量數據。
我有下一個HTML代碼:
<form name="f1">
<input type="text" name="sbox" onkeydown=keysearch(event)>
<button type="button" onclick=search()></button>
</form>
以及實現de功能的下一個JavaScript(它隱藏所有塊,然后顯示其中的一些,比較它們的文本(on)和搜索框上的文本):
function search() {
word = f1.sbox.value.toLowerCase()
v = document.getElementsByClassName('item')
for( i=0; i<v.length; ++i ) {
v[i].style.display = 'none'
s1 = i.toString()
if( document.getElementById(s1).innerHTML.toLowerCase().indexOf(word) != -1 ) {
s2 = s1 + "b";
document.getElementById(s2).style.display = 'block'
}
}
}
要應用於這樣的元素:
<div id="items">
<article id="0b" class="item">
<h3><a id="0" href="http://www.example.com/">Example</a></h3>
<img src="example.jpg">
</article>
(...)
</div><!-- end items -->
所以,一切正常。 問題是當我嘗試添加另一個功能以允許用戶使用de Enter鍵時,不僅使用單擊鼠標來使用搜索框。 這是我的代碼:
function keysearch(e) {
var charCode
if( e && e.which ) {
charCode = e.which
} else if( window.event ) {
e = window.event
charCode = e.keyCode
}
if( charCode == 13 ) {
search() // call the function above
}
}
我有一些我找不到的問題。 事實上,第二個功能也有效,但它做得太快,所以我可以看到它的結果不到一秒鍾,然后所有的東西都回到原位。
請...對此有所了解?
非常感謝你。
PS:在此之前,我會對這個搜索框進行“即時搜索”,所以如果你有一些想法......再次感謝你。
我嘗試了你的代碼,它似乎工作,但一個例外。 當您在輸入字段中按Enter鍵並注冊密鑰代碼13時,您還會調用表單的默認操作。 哪個是用http請求發布表單。 所以你的頁面會重新加載,使你的javascript無用。 它會彈出一秒鍾。 然后在重裝時消失。
嘗試在提交表單時返回false,如下所示。
<form name="f1" onsubmit="return false;">
這是一種非常簡單的方法來阻止它,它仍然可以在禁用javascript的情況下運行,因為實際操作將會運行。
如果你感興趣的話,有一個很好的方法可以用jQuery做到這一點。
var keycheckTimeout;
function keysearch(e) {
var charCode
if( e && e.which ) {
charCode = e.which
} else if( window.event ) {
e = window.event
charCode = e.keyCode
}
if( charCode == 13 ) {
clearTimeout( keycheckTimeout );
keycheckTimeout = setTimeout( function() { search(); }, 1000 );
}
}
如果沒有設置其動作,則表單形式不正確。 在某些瀏覽器中,如果您錯過了這個,則按Enter鍵刷新頁面。 這種情況發生在你的情況下。
更改
<form name="f1">
至
<form name="f1" action="javascript:void(0);">
另請參閱此stackoverflow答案
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.