1. 首頁
  2. 問答
  3. keydown事件如何工作？

keydown事件如何工作？

2017-07-07 539 views
0

我希望如果我的輸入文本值不是空的，然後顯示我的.removetext股利但它不能正常工作。如果您在第二個字符之後鍵入某個字詞，我的.removetext正在隱藏，但如果我的輸入不爲空，請不要隱藏我的.removetext類。keydown事件如何工作？

我的錯誤在哪裏？我想我不明白的keydown事件

$(document).ready(function() { 
 
    $('.search-hotels').on('input', function() { 
 
    var val = $.trim(this.value); 
 
    if (!val == "") { 
 
     $(".removetext").show(val.length > 0, function() { 
 
     var clear = $(this); 
 
     clear.on('click', function() { 
 
      alert('hey'); 
 
     }) 
 
     }); 
 
    } else { 
 
     $(".removetext").hide(); 
 
    } 
 
    }); 
 

 
});
.main { 
 
    position: relative; 
 
    width: 40%; 
 
} 
 

 
.search-hotels { 
 
    width: 100%; 
 
    padding: 15px; 
 
    border: 3px solid #ccc; 
 
} 
 

 
.removetext { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 25%; 
 
    font-size: 23px; 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <input type="text" class="search-hotels"> 
 
    <div class="removetext">&times;</div> 
 
</div>

來源

2017-07-07 ani_css

+0

只是出於好奇，到底怎麼做'$（EL）.show（功能）'工作？我沒有在[jQuery.show]（http://api.jquery.com/show/）的文檔中看到，我假設它使用'.show（duration，complete）'模式，任何人都可以確認嗎？ – James

+0

可能的測試 - 如果只有一個參數和參數是函數，則將其用作回調 – mplungjan

+0

如果添加'$（「。removetext」）。show（val.length> 0，function（）{ var clear = $（這個）; clear.on（'click'，function（）{ alert（'hey'）; }）那麼對於每個按鍵，你添加一個事件處理程序 – mplungjan

回答

3

嘗試輸入 - 它處理過貼：

$(function() { 
 
    $('.search-hotels').on('input', function() { 
 
    var val = $.trim(this.value); 
 
    $(".removetext").toggle(val.length>0); // test anything not blank 
 
    }); 
 
    // the event handler needs to be HERE and not inside the inout handler 
 
    $(".removetext").on('click', function() { 
 
     alert('hey'); 
 
    }); 
 
});
.main { 
 
    position: relative; 
 
    width: 40%; 
 
} 
 

 
.search-hotels { 
 
    width: 100%; 
 
    padding: 15px; 
 
    border: 3px solid #ccc; 
 
} 
 

 
.removetext { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 25%; 
 
    font-size: 23px; 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <input type="text" class="search-hotels" value=""> 
 
    <div class="removetext">&times;</div> 
 
</div>

如果你需要一個回調你確實需要顯示和隱藏

$(function() { 
 
    $('.search-hotels').on('input', function() { 
 
    var show = $.trim(this.value).length>0; 
 
    if (show) { 
 
     $(".removetext").show("slow",function() { 
 
     console.log("showing"); 
 
     }); 
 
    } 
 
    else { 
 
     $(".removetext").hide("slow",function() { 
 
     console.log("hiding"); 
 
     }); 
 
    } 
 
     
 
    }); 
 
});
.main { 
 
    position: relative; 
 
    width: 40%; 
 
} 
 

 
.search-hotels { 
 
    width: 100%; 
 
    padding: 15px; 
 
    border: 3px solid #ccc; 
 
} 
 

 
.removetext { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 25%; 
 
    font-size: 23px; 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <input type="text" class="search-hotels" value=""> 
 
    <div class="removetext">&times;</div> 
 
</div>

來源

2017-07-07 14:24:06 mplungjan

+1

這是我第一次看到如果語句切換功能感謝你真是太棒了！ –

+0

另一個問題確實有回撥？例如.toggle（val.length> 0，function（）{// callback}） –

+0

不需要。如果你需要回調，你需要顯示和隱藏 – mplungjan

3

你可以達到你想要的使用keyup代替​​和改變你的if聲明如下：

if ($(this).val());

使用​​表示它不會使用輸入的.val，但會檢查.val之前輸入更新，因爲.val將更新後keyup事件。

一個更好的辦法是使用input event如下：

$(document).ready(function() { 
 
    $('.search-hotels').on('input', function() { 
 
    if ($(this).val()) { 
 
     $(".removetext").show(function() { 
 
     console.log($(this).attr('class')); 
 
     }); 
 
    } else { 
 
     $(".removetext").hide(); 
 
    } 
 
    }) 
 
});
.main { 
 
    position: relative; 
 
    width: 40%; 
 
} 
 

 
.search-hotels { 
 
    width: 100%; 
 
    padding: 15px; 
 
    border: 3px solid #ccc; 
 
} 
 

 
.removetext { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 25%; 
 
    font-size: 23px; 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <input type="text" class="search-hotels"> 
 
    <div class="removetext">&times;</div> 
 
</div>

來源

2017-07-07 14:23:09 Pineda

+0

這是因爲輸入無法在當前註冊 – Zack

+1

是的我同意輸入更好;） – mplungjan

1

您應該使用KEYUP。按鍵註冊按鍵，但尚未填入輸入。您可以通過keydown事件屬性並使用屬性「key」（如果我沒記錯的話）來獲取在keydown期間輸入的值，但是如果要抓取輸入中的文本，則需要「keyup」

來源

2017-07-07 14:23:15 carinlynchin

+0

問題已解決，謝謝@carinlynchin –

2

Keydown事件在鍵入字符之前觸發，因此您應該使用在輸入字符後觸發的鍵入事件。

此外，!$(this).val()比$(this).val()==""

不同使用if($(this).val()=="")

來源

2017-07-07 14:23:28

+0

感謝ninad我不知道鍵控功能感謝 –

1

你可以在這裏更好地使用keyup和檢查$(this).val().length會更好。

$(document).ready(function() { 
 
    $('.search-hotels').on('keyup', function() { 
 
    if ($(this).val().length > 0) { 
 
     $(".removetext").show(function() { 
 
     console.log($(this).attr('class')); 
 
     }); 
 
    } else { 
 
     $(".removetext").hide(); 
 
    } 
 
    }) 
 
});
.main { 
 
    position: relative; 
 
    width: 40%; 
 
} 
 

 
.search-hotels { 
 
    width: 100%; 
 
    padding: 15px; 
 
    border: 3px solid #ccc; 
 
} 
 

 
.removetext { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 25%; 
 
    font-size: 23px; 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <input type="text" class="search-hotels"> 
 
    <div class="removetext">&times;</div> 
 
</div>

來源

2017-07-07 14:23:43 Dij

1

應該if ($(this).val())否則你的檢查，如果它是空的。 另外，使用keyup作爲​​捕捉您的val()它實際上有一個值之前。

$(document).ready(function() { 
 
    $('.search-hotels').on('keyup', function() { 
 
    if ($(this).val()) { 
 
     $(".removetext").show(function() { 
 
     console.log($(this).attr('class')); 
 
     }); 
 
    } else { 
 
     $(".removetext").hide(); 
 
    } 
 
    }) 
 
});
.main { 
 
    position: relative; 
 
    width: 40%; 
 
} 
 

 
.search-hotels { 
 
    width: 100%; 
 
    padding: 15px; 
 
    border: 3px solid #ccc; 
 
} 
 

 
.removetext { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 25%; 
 
    font-size: 23px; 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <input type="text" class="search-hotels"> 
 
    <div class="removetext">&times;</div> 
 
</div>

來源

2017-07-07 14:23:44

1

keydown事件觸發時按下按鈕，在那一刻不更新你的價值，嘗試使用keyup事件觸發釋放按鈕和輸入值被更新時...

$(document).ready(function() { 
 
    $('.search-hotels').on('keyup', function() { 
 
    console.log(this,$(this).val()); 
 
    if ($(this).val()) { 
 
     $(".removetext").show(function() { 
 
     console.log($(this).attr('class')); 
 
     }); 
 
    } else { 
 
     $(".removetext").hide(); 
 
    } 
 
    }) 
 
});
.main { 
 
    position: relative; 
 
    width: 40%; 
 
} 
 

 
.search-hotels { 
 
    width: 100%; 
 
    padding: 15px; 
 
    border: 3px solid #ccc; 
 
} 
 

 
.removetext { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 25%; 
 
    font-size: 23px; 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <input type="text" class="search-hotels"> 
 
    <div class="removetext">&times;</div> 
 
</div>

來源

2017-07-07 14:24:22

1

你不應該使用keydown事件，因爲它是一個按鍵的什麼寫入輸入value「後面」 。

理想情況下，你應該使用oninput（甚至不是每個人都建議的關鍵幀，而是@mplungjan誰更快:)。 oninput也將允許您正確地跟蹤複製/過去事件，不像onkeyup。

另外，只需通過this.value即可讀取輸入值，但請記得修剪它以消除空格。

$(document).ready(function() { 
 
    $('.search-hotels').on('input', function() { 
 
    if (this.value.trim()) { 
 
     $(".removetext").show(); 
 
    } else { 
 
     $(".removetext").hide(); 
 
    } 
 
    }) 
 
});
.main { 
 
    position: relative; 
 
    width: 40%; 
 
} 
 

 
.search-hotels { 
 
    width: 100%; 
 
    padding: 15px; 
 
    border: 3px solid #ccc; 
 
} 
 

 
.removetext { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 25%; 
 
    font-size: 23px; 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="main"> 
 
    <input type="text" class="search-hotels"> 
 
    <div class="removetext">&times;</div> 
 
</div>

來源

2017-07-07 14:25:55 dfsq

相關問題

 相關問題