Stopping a blur event on Click of a hyperlink

问题

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.

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!!

回答1:

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

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

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.

来源：https://stackoverflow.com/questions/16496709/stopping-a-blur-event-on-click-of-a-hyperlink