这涉及HTML+JS和/或JQuery:
我本来会对之前的帖子发表评论,但我没有评论声誉,或者由于某种原因无法发表评论。
Josh Stodola在第一部分中的伟大代码如下:
$(function() {
var txt = $("#myTextbox");
var func = function() {
txt.val(txt.val().replace(/s/g, ''));
}
txt.keyup(func).blur(func);
});
这很好,除了.replaces将光标放在每个按键的字符串末尾(至少在IE8和Chrome中是这样(。结果,它渲染了左&右光标键无用,这是在输入框内需要的。
有没有什么方法可以增强上面的代码,使光标键不会激活它,但使文本仍然可以动态更新?
最好的解决方案是避免使用关键事件来捕获文本输入。它们不是这份工作的最佳工具。相反,您应该使用HTML5 oninput
事件(在当前所有主要浏览器的最新版本和最新版本中都支持(,并在旧版本的InternetExplorer:中使用onpropertychange
var alreadyHandled;
txt.bind("input propertychange", function (evt) {
// return if the value hasn't changed or we've already handled oninput
if (evt.type == "propertychange" && (window.event.propertyName != "value"
|| alreadyHandled)) {
alreadyHandled = false;
return;
}
alreadyHandled = true;
// Your code here
});
这些事件不会为不会导致文本输入的键触发—当您将tab移回表单元素,并且由此产生的keyup事件导致页面的脚本再次向前移动焦点时,您不是很讨厌吗?
关键事件的额外优势:
- 当按下按键时,它们会立即开火,而不是像
keyup
中那样在抬起按键时开火。这意味着在对文本进行任何调整之前,不会出现视觉延迟 - 它们捕获其他形式的文本输入,如拖动&滴管、拼写检查器更正和剪切/粘贴
进一步阅读有效检测JavaScript中的用户输入。
更新函数:
var func = function(e) {
if(e.keyCode !== 37 && e.keyCode !== 38 && e.keyCode !== 39 && e.keyCode !== 40){
txt.val(txt.val().replace(/s/g, ''));
}
}
try:
$(function() {
var txt = $("#myTextbox");
var func = function(e) {
if(e.keyCode != "37" && e.keyCode != "38" && e.keyCode != "39" && e.keyCode != "40"){
txt.val(txt.val().replace(/s/g, ''));
}
}
txt.keyup(func).blur(func);
});
$(function() {
var txt = $("#myTextbox");
var func = function() {
txt.val(txt.val().replace(/s/g, ''));
}
txt.keyup(function(evt){
if(evt.keyCode < 37 || evt.keyCode > 40) {
func;
}
}).blur(func);
});
应该这样做。如果键代码不是37,38,39或40(四箭头键代码(,它将运行该函数。请注意,当按下任何其他键时,它实际上不会停止光标位置移动到末尾。为此,您需要跟踪当前光标的位置。看看这个jCaret插件的链接,它可以完成