gpt4 book ai didi

javascript - DataList 和 Enter 键事件

转载 作者:太空狗 更新时间:2023-10-29 13:31:09 27 4
gpt4 key购买 nike

我有一个触发按键事件的输入文本字段。输入时,我使用输入值处理一些特定代码。一切都很好。

HAML:

%input#myField{:type => "text"}

JavaScript:

my_field = document.getElementById('myField');

my_field.addEventListener("keypress", function (event) {
if (event.keyCode == 13) {
event.preventDefault();

if (tag_field.value.length != 0) {
console.log(my_field.value);
// Run my specific process with my_field.value
my_field.value = '';
}
}
}, false);

但现在我想在此输入上添加数据列表。

HAML:

%input#myField{:list => "htmlList", :type => "text"}
%datalist#htmlList
%option{:value => "toto"} toto
%option{:value => "foo"} foo

问题是当我在数据列表上导航以选择一个项目时,我按下了回车键。在回车键上,我的监听器被调用并使用输入的初始值处理我的代码。
在这一步,该字段的值为空。之后,该值将替换为在数据列表中选择的值。

所以我的问题是:

  • 有没有办法改变数据列表的行为,在不按回车键的情况下用数据列表选择的值替换输入值? (禁用数据列表的回车键)

  • 有没有办法检测数据列表何时处于事件状态(或可见)以处理我的 EventListener 中的不同行为?

最佳答案

Keypress 事件将在您按下键后但在数据注册到字段之前触发。Keyup 事件将在您按下按键但数据已注册到字段中之后触发

HTML:

<input list="browsers" id="myField"/>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>

JS:

var my_field = document.getElementById('myField');

my_field.addEventListener("keyup", function (event) {
if (event.keyCode == 13) {
event.preventDefault();

if (my_field.value.length != 0) {
console.log(my_field.value);
// Run my specific process with my_field.value
my_field.value = '';
}
}
}, false);

http://jsfiddle.net/5p6FZ/

关于javascript - DataList 和 Enter 键事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16131592/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com