I am working on web application and ran into issue where textbox looses focus while typing.
To be specific, let me explain how did it happens:
NOTE: Textbox is editable dropdown.
Below is the code used for dropdown.
<input type="text" id="placeDeathState" name="placeDeathState" size="3" maxlength="25"
value="" style="vertical-align:top; margin:2px 0px 0px 0px; border:0px;"
onfocus="focusAutoSelect(document.getElementById('placeDeathState'), 2, '', '', '');"
onblur="this.autoSelect.hideComboList();">
UPDATE-1: code for function focusAutoSelect()
function focusAutoSelect(obj, col, tgts, cols, scripts) {
if (!obj.autoSelect)
obj.autoSelect = new AutoSelectCombo(obj.id, col, tgts, cols, scripts);
}
UPDATE-2:
AutoSelectCombo object:
Here is what it does:
This is the AutoSelectCombo object. Although it began as a linear autoselect, it is now a select by filtration. Anything typed into this box will be used to filter the option list to only the items containing the text that was typed.
function AutoSelectCombo(id, col, tgts, cols, scrs) {
this.editFocused= false;
this.selFocused = false;
this.timer = null;
this.column = col;
this.quicksel = false;
this.quickstr = "";
this.targets = new Array();
this.columns = new Array();
this.scripts = scrs.split("#");
this.gotChar = false;
this.ascDiv = document.getElementById(id+"div");
this.ascText = document.getElementById(id);
this.ascImage = document.getElementById(id+"btn");
this.ascEditBtn = document.getElementById(id+"edit");
this.ascSDiv = document.getElementById(id+"combo");
this.ascSelect = document.getElementById(id+"select");
this.ascFrm = document.getElementById(id+"ifrm");
this.options = new Array();
this.lastLen = this.ascText.value.length;
this.maxItems = 10;
this.blurClosed = false;
this.selIndex=0;
if ((tgts!=null) && (tgts!="")) {
this.targets = tgts.split("|");
this.columns = cols.split("|");
}
if (this.ascText.readOnly == true)
this.quicksel = true;
for (; this.selIndex<this.ascSelect.length; this.selIndex++)
if (this.ascSelect.options[this.selIndex].value == this.ascSelect.value)
break;
if (this.selIndex >= this.ascSelect.length)
this.selIndex = -1;
if (this.ascDiv)
this.ascDiv.autoSelect = this;
if (this.ascText)
this.ascText.autoSelect = this;
if (this.ascImage)
this.ascImage.autoSelect = this;
if (this.ascEditBtn)
this.ascEditBtn.autoSelect = this;
if (this.ascSDiv)
this.ascSDiv.autoSelect = this;
if (this.ascSelect)
this.ascSelect.autoSelect = this;
this.ascText.oldOnFocus = this.ascText.onfocus;
this.ascText.onfocus = function(evt) {
if (!evt)
evt = window.event;
this.autoSelect.editFocused = true;
if (this.autoSelect.ascText.oldOnFocus)
this.autoSelect.ascText.oldOnFocus.call(this.autoSelect.ascText);
}
this.ascText.oldOnBlur = this.ascText.onblur;
this.ascText.onblur = function(evt) {
if (!evt)
evt = window.event;
this.autoSelect.editFocused = false;
this.autoSelect.handleBlur(evt);
if (this.autoSelect.ascText.oldOnBlur)
this.autoSelect.ascText.oldOnBlur.call(this.autoSelect.ascText);
}
this.ascText.oldOnKeyDown = this.ascText.onkeydown;
this.ascText.onkeydown = function(evt) {
if (!evt)
evt = window.event;
this.autoSelect.handleComboKeyDown(evt);
if (this.autoSelect.ascText.oldOnKeyDown)
this.autoSelect.ascText.oldOnKeyDown.call(this.autoSelect.ascText);
}
this.ascText.oldOnKeyPress = this.ascText.onkeypress;
this.ascText.onkeypress = function(evt) {
if (!evt)
evt = window.event;
this.autoSelect.handleComboKeyPress(evt);
if (this.autoSelect.ascText.oldOnKeyPress)
this.autoSelect.ascText.oldOnKeyPress.call(this.autoSelect.ascText);
}
this.ascText.oldOnKeyUp = this.ascText.onkeyup;
this.ascText.onkeyup = function(evt) {
if (!evt) {
evt = window.event;
}
this.autoSelect.handleComboKeyUp(evt);
if (this.autoSelect.ascText.oldOnKeyUp) {
this.autoSelect.ascText.oldOnKeyUp.call(this.autoSelect.ascText);
}
}
this.ascImage.oldOnClick = this.ascImage.onclick;
this.ascImage.onclick = function(evt) {
if (!evt) {
evt = window.event;
}
this.autoSelect.editFocused = true;
this.autoSelect.toggleComboList();
this.autoSelect.blurClosed = false;
//if (this.autoSelect.ascImage.oldOnClick)
// this.autoSelect.ascImage.oldOnClick.call(this.autoSelect.ascImage);
}
this.ascSelect.oldOnKeyPress = this.ascSelect.onkeypress;
this.ascSelect.onkeypress = function(evt) {
if (!evt)
evt = window.event;
var keyCode = evt.keyCode ? evt.keyCode : evt.which ? evt.which : evt.charCode;
if (evt.keyCode == 13) {
this.autoSelect.hideComboList();
return false;
}
}
this.ascSelect.oldOnChange = this.ascSelect.onchange;
this.ascSelect.onchange = function(evt) {
if (!evt)
evt = window.event;
this.autoSelect.setComboValue();
// this.autoSelect.hideComboList();
//if (this.autoSelect.ascSelect.oldOnChange)
// this.autoSelect.ascSelect.oldOnChange.call(this.autoSelect.ascSelect);
}
this.ascSelect.oldOnClick = this.ascSelect.onclick;
this.ascSelect.onclick = function(evt) {
if (!evt) {
evt = window.event;
}
this.autoSelect.setComboValue();
//this.autoSelect.ascText.focus();
//this.autoSelect.hideComboList();
for (i=1; i<this.autoSelect.scripts.length; (i=i+1)) {
eval(this.autoSelect.scripts[i]);
}
}
this.ascSelect.oldOnFocus = this.ascSelect.onfocus;
this.ascSelect.onfocus = function(evt) {
if (!evt)
evt = window.event;
this.autoSelect.selFocused = true;
}
this.ascSelect.oldOnBlur = this.ascText.onblur;
this.ascSelect.onblur = function(evt) {
if (!evt)
evt = window.event;
this.autoSelect.selFocused = false;
this.autoSelect.hideComboList();
}
this.duplicateElements();
}
I am not getting how to investigate further and what goes wrong.
I found the problem,
The problem was with the function showComboList
, after a match is found, Combo list is shown and is focused, as a result focus is lost from the input element.
Inside the function AutoSelectCombo.prototype.showComboList = function(){
,
remove/comment the line that says fs.focus()
.
& you're good to go.