下拉列表中的键盘处理 [英] Handling Keyboard in Drop Down List

问题描述

我正在根据单位(km到m，lb到g等)转换值.除了一个似乎无法解决的错误，我可以正常运行.

I am converting values based on units (km to m, lb to g, etc). I have it working, except for one bug that I can't seem to resolve.

这里是处理事件的函数(转换发生在jQuery插件中):

Here is the function that handles the events (conversion is happening in a jQuery plug-in):

function unitConversion() {
    var from;

    // Remember which unit was selected in the drop down list.
    $('select.unit').live('click', function () {
        from = $(this).find('option:selected').text();
    });

    // Now handle the conversion.
    $('select.unit').live('change', function () {
        // Get the from and to values.
        // var from = $(this).prev().find('option:selected').text();
        var to = $(this).find('option:selected').text();

        // Change the text for each field that corresponds with this component.
        var textBoxes = $(this).closest('div.data-group').find('input:text');
        textBoxes.each(function () {
            var curValue = $(this).val();
            $(this).val($(this).unitConvert({
                value: curValue,
                from: from,
                to: to
            }));
        });
    });
}

这很好用(尽管如果您对此代码有任何改进，我总是想学习).但是，我最初遇到的问题是我必须记住下拉列表中的上一个选定单位.因此，我正在做的点击"事件.

This works great (although, if you have any improvements to this code, I'm always wiling to learn). However, the original problem I had was that I had to remember the previous selected unit in the drop down list. Hence, the 'click' event that I'm doing.

此解决方案非常有效...只要个人使用鼠标即可.但是，如果我使用键盘跳至下拉列表，然后按向上/向下箭头键，则什么也不会发生.我尝试了各种关键事件，但这些事件似乎也不起作用.我应该在这里做什么来处理键盘和鼠标输入?

This solution works great...as long as the individual uses the mouse. However, if I tab onto the drop down list with the keyboard, and press the up/down arrow keys, nothing happens. I have tried the various key* events, and those do not seem to work, either. What should I be doing here to handle keyboard AND mouse input?

(我希望通过更改事件可以访问以前选择的项目，但事实并非如此.)

(My hope was that the change event would allow me to access the previously selected item, but that doesn't appear to be the case.)

更新:我想提供一些其他说明.

Update: I wanted to provide some additional clarification.

如果我使用focus事件，那么转换会变得很奇怪.原因是因为我仅在第一次获得焦点时才设置"from"值.如果我希望每次都能正确进行转换，则必须将精力集中在下拉列表上，然后重新进行处理.不太有用.

If I use the focus event, then the conversions get kind of weird. The reason is because I only set the "from" value the first time I get focus. If I want to the conversion to happen correctly every time, I have to lose focus on the drop down list, and then do the process over. Not very useful.

此外，无论出于何种原因，当我在字段中制表并单击向上和向下箭头时，不会触发change事件.我真的不知道为什么会这样...

In addition, for whatever reason, when I tab into the field and then click the up and down arrows, the change event does not fire. I really have no idea why that is...

推荐答案

我将对您的代码进行两项更改.

I'd make two changes to your code.

首先请确保您的选项同时具有text和value:

First make sure your options have both text and value:

<select>
   <option value="km">KM</option>
   ...
</select>

然后不用执行$('select.unit').find('option:selected').text();，您可以编写:

Then instead of doing $('select.unit').find('option:selected').text(); You can just write:

$('select.unit').val();

这也更正确，因为您可以向该值显示不同的文本，例如向用户显示公里"，但仍具有"km"的值以与该插件一起使用.

This is also more correct as you can show different text to the value, for example show "kilometres" to the user, but still have the value as "km" to work with the plugin.

现在，解决真正的问题...

Now, onto the real problem...

记住"先前状态的最简单方法是将数据附加到元素本身.避免内存泄漏和其他各种问题的同时，最好的方法是使用jQuery的data().只要给它命名和一个值，它就会在您选择的select元素中记住它.

The simplest way to "remember" previous state is to attach data to the element itself. The best way to do this, while avoid memory leaks and all sorts of other problems, is to use jQuery's data(). Just give it a name and a value, and it'll remember it on the select element of your choosing.

// Now handle the conversion.
$('select.unit').live('change', function () {
    // Get the from and to values.
    var from = $(this).data("from");
    var to = $(this).val();

    // Remember the from value for next time
    $(this).data("from", to);

    // Change the text for each field that corresponds with this component.
    var textBoxes = $(this).closest('div.data-group').find('input:text');
    textBoxes.each(function () {
        var curValue = $(this).val();
        $(this).val($(this).unitConvert({
            value: curValue,
            from: from,
            to: to
        }));
    });
});

使用相同的方法来设置文档加载时的from值(如果需要):

Use the same method to set the from value on document load (if needed):

$(function () {
   $('select.unit').each(function () {
      $(this).data("from", $(this).val());
   });
});

这篇关于下拉列表中的键盘处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！