问题描述
||
我正在使用一个输入字段,该字段已经映射了keyCodes,以便键盘输入将不同的语言字符呈现到输入字段中。
当字符到达输入\'view \'的末尾时,问题就变成了,使用jQuery val()方法的\“ mapped \”字符的任何其他输入都不会被解释为来自浏览器的键输入,因此保持最后输入的字符始终可见。
因此,我必须添加插入符号逻辑(jsfiddle中的底部输入使用插入符号逻辑),但这在Chrome /(webkit?)上不起作用
这是我的示例的jsfiddle。 http://jsfiddle.net/dwickwire/S9EKN/
编辑:我测试了以下版本,对我来说可以在FF中工作,但不能在Chrome中工作
Mac SNow Leapord OSX 10.6.7
Chrome:v 11.0.696.68,v 11.0.696.71-不起作用
Firefox:4.0.1-适用
Windows Chrome:-v不确定-不起作用
我不确定如何解决这个问题,有什么想法吗?
谢谢
解决方法
如果保存并添加到输入的“ 0”位置,它将更新并保持键入的字符在视图中。但是,如果单击并在输入中间开始输入,则失败。
我使用下面的代码更新了第二个输入演示。另请注意,所添加的输入范围和测试范围应具有相同的字体大小。
input_2.bind(\'keydown.keyboard\',function(e) {
var key = \"\",current_val = input_2.val(),pos = input_2.caret(),start_pos = pos.start,end_pos = pos.end,scroll = $(this).scrollLeft();
// some mapped keys
switch (e.which) {
// e key
case 69:
key = \"ε\";
e.preventDefault();
break;
// f key
case 70:
key = \"φ\";
e.preventDefault();
break;
// z key
case 90:
key = \"ζ\";
e.preventDefault();
break;
// a key
case 65:
key = \"α\";
e.preventDefault();
break;
}
if (key !== \'\') {
var test = $(\'<span class=\"test\"> \' + key + \'</span>\').appendTo(\'body\');
scroll += test.width();
test.remove();
}
input_2.val(current_val + key);
//Insert/Replace text at caret then restore caret
input_2.value = current_val.substr(0,start_pos) + key + current_val.substr(end_pos,current_val.length);
input_2.caret(start_pos + key.length,start_pos + key.length);
if (key !== \'\') {
$(this).scrollLeft(scroll);
}
});
更新:scrollLeft的位置似乎有点偏离,因此,如果在跨度内用字符添加add2ѭ,效果会更好(更新的演示)