2016/09/20 10:27 羅光男

autocomplete

JavaScript

延續上一篇文章

這次要再把整個功能做優化，原本的功能會有一個問題，

當使用者輸入完文字而autocomplete沒有對應的字並離開TextBox時，輸入的文字還會留在TextBox上面

使用者必須自行刪除這些文字，這樣的功能並不直覺，

於是我們便去抓取TextBox的狀態，當TextBox失去focus時，去判斷TextBox是否有文字並清空TextBox的文字

在這裡使用JQuery事件 .blur()方法去實作這個方法

.blur()定義與用法

當元素失去焦點時發生blur事件。

blur()函數觸發blur事件，或者如果設置了function 參數，該函數也可規定當發生blur事件時執行的代碼

程式如下：

$('#TextBox').blur(function () {
if ($(this).val() != "") {
$(this).val("");
}
});

然而卻發生一個奇怪的BUG

在清空TextBox的文字之後會發現游標還停留在最後一個文字的位置上不會消失

而且這個BUG有時會出現有時卻正常

發生這個BUG的原因還不是很清楚，猜測是因為TextBox再失去focus時會把游標一起隱藏

但是在把游標隱藏前我們先把字串給清空導致游標的殘影會留在原處

於是我去加上setTimeout()延遲清空字串的程式，才解決這個問題。

setTimeout()定義與用法

setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式。

語法

setTimeout(code,millisec)

code：必需。要调用的函数后要执行的 JavaScript 代码串。

millisec：必需。在执行代码前需等待的毫秒数。

程式如下：

$('#BlindCarbonCopyTextBox').blur(function () {
if ($(this).val() != "") {
var t = setTimeout("$('#BlindCarbonCopyTextBox').val('')", 50);
}
});

jQuery-autocomplete套件清除欄位游標不會消失BUG

jQuery-autocomplete套件 清除欄位 游標不會消失BUG