通过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 毫秒运行一次计算。