停止模糊事件单击超链接

问题描述

我使用了此答案创建一个下拉外观一样。我尝试让用户只选择列表中显示的选项，并且他不能在字段中输入自己的值。

I used this answer jQuery <select> simulation with input and div to create a dropdown look alike. I am trying the make the user select only the options displayed in the list and he cannot enter his own value in the field.

如果他在输入字段中输入任何字符，则显示具有隐藏列表的链接，并且在点击该链接时，用户在输入字段中输入的值被清除，并且该列表再次显示给用户，并且焦点返回到该字段。

If he enters any character in the input field, then a link is displayed with the list hidden and on click of this link, the user entered value in input field is cleared and the list is again displayed to the user and the focus returned to the field.

但是，发生什么是点击这个链接，列表出现，并立即变得模糊。但是，我想要的列表留下。我使用mouseover事件来克服这一点，但显然我被告知只使用点击事件。这里是代码 - >

But, what happens is on click of this link, the list appears and gets blurred immediately. But, i want the list to stay. I used mouseover event to overcome this, but apparently i have been told to use only click event. Here is the code --> http://jsbin.com/uxerus/25/edit

欢迎任何有关这方面的见解。感谢!!

Any insights on this is welcome. thanks!!

推荐答案

在值更新后尝试将焦点返回到输入（）：

Try returning focus to the input after the value is updated (demo):

$('#content span').click(function(){
    $('#input').val($(this).html()).focus();
    $('#content').hide();
});

我没有测试过，但IE可能会将插入符号移动到开头，而其他浏览器移动到结束。要解决这个问题，您需要使用插入符插件或添加一个更多的代码。

I haven't tested this, but IE will probably move the caret to the beginning while other browsers will move it to the end. To fix that you'll need to use a caret plugin or add a bunch more code.

这篇关于停止模糊事件单击超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！