[英]how to trigger function right after select a option from datalist under a input?
For example, I have the following input and datalist.例如,我有以下输入和数据列表。 After select option "a" from dropdown list, how to trigger a function?
从下拉列表中选择选项“a”后,如何触发功能?
The current way is only working after the focus is removed from input.当前方式仅在焦点从输入中移除后才有效。 What I want is, right after click the option, then it will trigger another function,Like trigger the javascript function?
我想要的是,在单击该选项后,它会触发另一个功能,例如触发 javascript 功能?
I tried "onchange" and "onclick", it has to remove the focus.我试过“onchange”和“onclick”,它必须移除焦点。 I want the action being triggered after option is selected.
我希望在选择选项后触发操作。
<input id="endpointsInput_1" name="endpointsname_1" list="endpointsname_1" class="form-control" type="text" style="display:inline-block;width:100%;" onclick="getJsonRequest(1);"/>
<datalist id="endpointsname_1">
<option value="a">a</option>
<option value="b">b</option>
<option value="folders/delete">folders/delete</option>
<option value="c">c</option>
</datalist>
my script is as below.我的脚本如下。
<script type="text/javascript">
function getJsonRequest(i){
$("input[name=endpointsname_"+i+"]").change(function () {
alert($(this).val());}
I found a nice way to trigger a function exclusively on choosing an option from a datalist and not affecting manual input – using a keyup
event, and it works flawlessly on both desktop and mobile devices.我找到了一个很好的方法来触发一个功能,专门从数据列表中选择一个选项而不影响手动输入——使用
keyup
事件,它在桌面和移动设备上都能完美运行。 When a datalist option is chosen, the event listener sees it as pressing a key without a keyCode
– the event object simply lacks the keyCode
property (I noticed it accidentally, checking keyup events with console.log).选择DataList选项时,事件侦听器将其视为在没有键槽的情况下按下
keyCode
- 事件对象只是缺少keyCode
属性(我注意到它意外注意,使用console.log检查密钥事件。 Below is a runnable example of code to blur an input and temporarily change its background color right after selecting a datalist option:下面是一个可运行的代码示例,用于在选择数据列表选项后立即模糊输入并临时更改其背景颜色:
function blurInputOnDatalistChoice(e) { if (!e.keyCode) { // OR: if (e.keyCode === undefined) e.target.blur(); e.target.setAttribute('style', 'background-color:yellow'); setTimeout(() => e.target.removeAttribute('style'), 1500); } }
<h1>Demo</h1> <input onkeyup="blurInputOnDatalistChoice(event)" list="cars"></input> <datalist id="cars"> <option value="Audi"> <option value="BMW"> <option value="Volkswagen"> </datalist>
UPD: Datalist choices can also be detected the following way: the event that is generated in this case is just an instance of Event
, but NOT of KeyboardEvent
, as in case of pressing real keys. UPD:Datalist 选择也可以通过以下方式检测:在这种情况下生成的事件只是
Event
一个实例,而不是KeyboardEvent
的实例,就像按下真实键的情况一样。 So, the alternative check is: if (!(e instanceof KeyboardEvent)) { }
.因此,替代检查是:
if (!(e instanceof KeyboardEvent)) { }
。
Also, there is a possibility to listen for this purpose not to keyup
events, but to input
events: in this case choices from dataList will also trigger "unusual" events that are not instances of InputEvent
and also, unlike typical input events, lack the inputType
property.此外,还有听为此目的而不是一个可能性
keyup
事件,而是要input
的事件:在这种情况下,从DataList的选择也将引发“不寻常”的事件不在的情况下InputEvent
,也不像典型的输入事件,缺乏inputType
属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.