Question

例如，我有以下输入和datalist。从下拉列表中选择选项“a”后，如何触发功能？

当前方式仅在从输入中移除焦点后才起作用。我想要的是，在点击该选项后，它会触发另一个函数，就像触发javascript函数一样？

我试过“onchange”和“onclick”，它必须删除焦点。我希望在选择选项后触发操作。

                            <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>

我的脚本如下。

<script type="text/javascript">
     function getJsonRequest(i){
        $("input[name=endpointsname_"+i+"]").change(function () {
            alert($(this).val());}

Answer 1

试试这个伴侣

document.getElementById('endpointsInput_1').addEventListener('input', function () {
   console.log('changed'); 
});

Fiddle

Answer 2

我找到了一种很好的方式来触发功能，该方式专门用于从数据列表中选择一个选项并且不影响手动输入–使用 keyup 事件（应用于输入，而不是数据列表），并且它在台式机和移动设备上均可完美运行。选择一个选项后，事件侦听器将其视为按下 keyCode 未定义 键（我不小心注意到了这一点，使用console.log打印出按下的键的代码）。下面是从数据列表中选择一个选项后模糊输入的代码示例：

•HTML：

<input onkeyup="myFunction(event.keyCode)" type="text" id="myInput" list="myList"></input>

•Javascript：

function myFunction(keyCode){
    if (!keyCode) { // OR: if (keyCode === undefined)
        document.getElementById("myInput").blur();
    }
}

如何在输入下从datalist中选择一个选项后立即触发功能？

2 个答案: