通过javascript触发自动弹出列表选择事件 [英] Trigger event of auto popup list selection via javascript

问题描述

我以前已将值1111,1222和1333输入HTML文本输入。现在如果我输入1到文本输入，它应该弹出一个列表，值为1111,1222和1333作为可用选项。当您选择任何一个选项时，如何触发事件？

I have previously entered value 1111, 1222, and 1333 into a HTML text input. Now if I enter 1 to the text input, it should popup a list with value 1111, 1222, and 1333 as available options. How do you trigger an event when any one of these options is selected?

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

I have a javascript function that performs a calculation on values entered into the text input via "onkeyup" event. This works very well if the user just enter value via keyboard. However, it does not work if the user is selecting a previously entered value from the auto popup list.

我知道我们可以关闭自动弹出列表，方法是添加autocomplete = 关闭到表单/文本输入。但是有没有办法使其与自动弹出列表一起工作？我尝试了所有可用的事件选项，包括onchange，但没有一个可用。

I know we can turn off the auto popup list by adding autocomplete="off" to the form/text input. But is there any solution to make it work with the auto popup list? I have tried all available event options including "onchange", but none of those works.

HTML代码非常简单：

The HTML code is very simple:

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

推荐答案

c $ c> onchange 事件？我不确定是否启动自动完成选择，但您也可以尝试 onpropertychange 事件并检查value属性：

Have you tried the onchange event? I'm not sure if it fires for auto-complete selection, but you could also try the onpropertychange event and check for the value property:

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

这也可以在右键单击 - >粘贴或右键单击 -

This would also work on right-click->paste or right-click->cut, which wouldn't fire your calculation using your current method.

编辑

看起来您可能需要使用事件和计时器的组合。设置编辑对焦的时间间隔，并将其清除。我还会使用IE的onpropertychange来提高效率，并保持keyup事件的发挥。[/ p>

It looks like you might have to use a combination of events and timers. Set an interval on focus of the edit and clear it on blur. I'd also use the onpropertychange for IE to make it more efficient and keep the keyup event to make it rather quick too.

//- 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);
    }
}

如果您的计算程序很小（像一个简单的数学方程式），我只是省略以前的值检查，每100ms运行一次计算。

If your calculation routine is tiny (like a simple mathematical equation), I would just leave out the previous value check and run the calculation every 100ms.

这篇关于通过javascript触发自动弹出列表选择事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！