javascript - 通过javascript触发自动弹出列表选择事件

Question

我之前在 HTML 文本输入中输入了值 1111、1222 和 1333。现在，如果我在文本输入中输入 1，它应该会弹出一个列表，其中包含值 1111、1222 和 1333 作为可用选项。选择这些选项中的任何一个时，如何触发事件？

我有一个 javascript 函数，它对通过“onkeyup”事件输入到文本输入中的值进行计算。如果用户只是通过键盘输入值，这会非常有效。但是，如果用户从自动弹出列表中选择先前输入的值，它就不起作用。

我知道我们可以通过在表单/文本输入中添加 autocomplete="off"来关闭自动弹出列表。但是有什么解决方案可以让它与自动弹出列表一起使用吗？我已经尝试了所有可用的事件选项，包括“onchange”，但没有一个有效。

HTML代码非常简单:

<input id="elem_id_1" name="output" type="text" value="0" onkeyup="update();"/>

js功能也很简单:

function update() {
  var a = $('elem_id_1').value;
  $('elem_id_2').value = a / 100;
}

Answer 1

您是否尝试过 onchange 事件？我不确定它是否会触发自动完成选择，但您也可以尝试 onpropertychange 事件并检查 value 属性:

textInput.onpropertychange = function ()
{
    if (event.propertyName == "value")
        doCalculation();
}

这也适用于右键单击 -> 粘贴或右键单击 -> 剪切，这不会触发使用当前方法的计算。

编辑

看起来您可能必须结合使用事件和计时器。设置编辑焦点的间隔并在模糊时清除它。我还会使用 IE 的 onpropertychange 来提高效率，并保留 keyup 事件以使其变得相当快。

//- If it's IE, use the more efficient onpropertychange event
if (window.navigator.appName == "Microsoft Internet Explorer")
{
    textInput.onpropertychange = function ()
    {
        if (event.propertyName == "value")
            doCalculation();
    }
}
else
{
    var valueCheck, lastValue = "";
    textInput.onkeyup = function ()
    {
        doCalculation();
    }
    textInput.onfocus = function ()
    {
        valueCheck = window.setInterval(function ()
        {
            // Check the previous value against (and set to) the new value
            if (lastValue != (lastValue = textInput.value))
               doCalculation();
        }, 100);
    }
    textInput.onblur = function ()
    {
        window.clearInterval(valueCheck);
    }
}

如果您的计算例程很小(比如一个简单的数学方程式)，我会忽略之前的值检查并每 100 毫秒运行一次计算。