element2.focus() fired after element1.onblur() not working in Fx/Chrome/Safari - Salesforce
I am on Salesforce (visualforce) and using a custom autocomplete Javascript. My requirement is to trigger auto complete search on a text field element2 as soon as a selection is made from suggestions on another text field element1.
Since I need to be able to scroll through the auto suggestions list using a keyboard, I need to have focus on the particular field. Am currently doing a element2.focus() just after a selection is made on element1 and triggering the auto suggest search on element2.
Also, on these fields, when the search is running and the user manually focuses on the field, the auto suggestion collapses - this is an indication of cancelling the search. Because of this, I cannot trigger the search and then call element2.focus()
Here's what am experiencing in different browsers:
Chrome/Firefox 3.5, 4/Safari 5.0.3:
- Select an option from suggestions under
element1 - Value in field changes
- Suggestions collapse
- Field blurs, but not sure where focus goes. Probably
window
IE 8:
- Select an option from suggestions under
element1 - Value in field changes
- Suggestions collapse
- Field blurs and
element2takes focus - Search fires for this field
Also, the above difference in behaviour is only when am selecting using a mouse click. When using a keystroke开发者_开发技巧 (up/down then enter) this works as expected in all browsers. The same set of javascript methods are executed on both mouse and keyboard selection.
An interesting 'fix' I found for this is calling element2.focus() after, say, 100 ms using setTimeout(). Am guessing this is because element1's onblur is disrupting element2.focus() but am not really happy using this.
Well, any ideas?
Code Samples:
//mouseclick handler
function handleMouseClick(event){
element1.value = (event.target)?event.target.textContent:event.srcElement.innerText;
callback();
// kills the children and hides the div containing the suggestions
hideAutoComplete();
}
function callback() {
element2.value = '';
element2.focus();
}
Can you use a framework? They really take the pain out of cross-browser compatibility for events. Here's a short example using jQuery that seems to do what you want. Any of the major frameworks would probably work just as well for this.
<html>
<head>
<title>Testing some JS behavior</title>
</head>
<body>
<form id="fooForm">
<label for="a">A: </label><input id="a"/><br />
<label for="b">B: </label><input id="b"/><br />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$('#b').focus(function(e) {
alert("Focusing on b now.");
});
$('#a').blur(function(e) {
alert("Doing my business on element A.");
$('#b').focus();
// Stop bubbling, just in case this got triggered by them clicking into B
return false;
});
</script>
</body>
</html>
加载中,请稍侯......
精彩评论