我正在开发一个Mozilla附加组件,它用左移+等效替换左侧的数字键。例如,如果按1,它将被'!'取代自动(特别是在线编译器)。这是代码
document.activeElement.addEventListener("keydown",keyc);
var ch = [')','!','@','#','$','%','^','&','*','('];
function keyc(event)
{
var x = document.activeElement.value;
if( event.keyCode >= 48 && event.keyCode <= 57)
{
event.preventDefault();
x= x + ch[event.keyCode -48];
}
document.activeElement.value = x ;
}
这样可以正常工作,但只有在数字键后按下另一个键时才会替换该字符。 任何人都可以指出为什么会发生这种情况...... 提前谢谢。
答案 0 :(得分:1)
这是因为你正在使用keydown事件。它在输入输入字段之前触发。如果你改为使用keyup事件,它将在输入实际输入到输入字段时触发。
更新:
好的,所以我通过以下更正更新了我的答案。我通过阻止keydown事件的默认行为来阻止输入。我将字符插入插入符号位置,而不是将其附加到textarea的末尾。
工作小提琴:http://jsfiddle.net/e4VaY/6/
document.activeElement.addEventListener("keydown",blockInput);
document.activeElement.addEventListener("keyup",keyc);
var ch = [')','!','@','#','$','%','^','&','*','('];
function keyc(event)
{
var txtArea = document.activeElement;
var x = txtArea.value;
if( event.keyCode >= 48 && event.keyCode <= 57)
{
insertAtCaret(txtArea, ch[event.keyCode -48]);
}
}
function blockInput(event){
if( event.keyCode >= 48 && event.keyCode <= 57)
{
event.preventDefault();
}
}
function insertAtCaret(txtarea,text) {
var scrollPos = txtarea.scrollTop;
var strPos = 0;
var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
"ff" : (document.selection ? "ie" : false ) );
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
strPos = range.text.length;
}
else if (br == "ff") strPos = txtarea.selectionStart;
var front = (txtarea.value).substring(0,strPos);
var back = (txtarea.value).substring(strPos,txtarea.value.length);
txtarea.value=front+text+back;
strPos = strPos + text.length;
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
range.moveStart ('character', strPos);
range.moveEnd ('character', 0);
range.select();
}
else if (br == "ff") {
txtarea.selectionStart = strPos;
txtarea.selectionEnd = strPos;
txtarea.focus();
}
txtarea.scrollTop = scrollPos;
}