[英]Mirroring input content with non-printable chars like CTRL, ALT or shift key
When non-printable char is pressed, it's replaced with let's say for CTRL=17 with "[CTRL]" . 当按下不可打印的char时,将其替换为CTRL = 17的“ [CTRL]” 。 Here is code an example
这是代码示例
$('#textbox1').keyup(function (event) {
if (8 != event.keyCode) {
if(17==event.keyCode){
$('#textbox1').val($('#textbox1').val()+"[CTRL]")
$('#textbox2').val($('#textbox1').val());
}else{
$('#textbox2').val($('#textbox1').val());
}
} else {
$('#textbox2').val($('#textbox1').val());
}
});
the problem is when user presses backspace the second input must reflect the content of the first one, so "[CTRL]" must be deleted at once like any other chars. 问题是当用户按下退格键时,第二个输入必须反映第一个输入的内容,因此必须像其他任何字符一样立即删除“ [CTRL]” 。
You can check in the keydown
for the last character in the input field. 您可以在输入框中的最后一个字符中键入
keydown
。 If it's a ]
you can remove everything from the right to the last found opening bracket [
. 如果是[
]
,则可以从右到最后找到的左括号[
]
删除所有内容。 Unfortunatly this does not work if you're cursor is inside '[ ]'
. 不幸的是,如果您的光标位于
'[ ]'
内部,则此方法将无效。
$('#textbox1').keydown(function(event) {
if(8 == event.keyCode) {
var element = $(this),
value = element.val(),
lastChar = value.slice(-1);
if(lastChar == ']') {
var lastIndex = value.lastIndexOf('['),
index = value.length - lastIndex;
element.val(value.slice(0, -index) + "]");
}
}
});
You could make use of the keyCode
and/or in combination with charCode
(if required). 您可以使用
keyCode
和/或与charCode
结合使用(如果需要)。 Basic idea would be: 基本思路是:
keydown
and listen for keycode keydown
并监听键码 A very basic example: 一个非常基本的例子:
Demo: http://jsfiddle.net/abhitalks/L7nhZ/ 演示: http : //jsfiddle.net/abhitalks/L7nhZ/
Relevant js : 相关js :
keyMap = {8:"[Backspace]",9:"[Tab]",13:"[Enter]",16:"[Shift]",17:"[Ctrl]",18:"[Alt]",19:"[Break]",20:"[Caps Lock]",27:"[Esc]",32:"[Space]",33:"[Page Up]",34:"[Page Down]",35:"[End]",36:"[Home]",37:"[Left]",38:"[Up]",39:"[Right]",40:"[Down]",45:"[Insert]",46:"[Delete]"};
$("#txt").on("keydown", function(e) {
// check if the keycode is in the map that what you want
if (typeof(keyMap[e.keyCode]) !== 'undefined') {
// if found add the corresponding description to the existing text
this.value += keyMap[e.keyCode];
// prevent the default behavior
e.preventDefault();
}
// if not found, let the entered character go thru as is
});
The concept remains the same, just copying the value to the second input: 概念保持不变,只是将值复制到第二个输入:
Demo 2: http://jsfiddle.net/abhitalks/L7nhZ/3/ 演示2: http : //jsfiddle.net/abhitalks/L7nhZ/3/
$("#txt1").on("keyup", function(e) {
if (typeof(keyMap[e.keyCode]) !== 'undefined') {
this.value += keyMap[e.keyCode];
e.preventDefault();
}
$("#txt2").val(this.value); // copy the value to the second input
});
Regarding deletion of the description, I could not get it done by caching the last inserted descrition from the map. 关于删除描述,我无法通过缓存映射中最后插入的描述来完成。 Somehow, I kept struggling with the regex with a variable.
不知何故,我一直在用变量来处理正则表达式。 Anyway, a simpler solution is to just add another event handler for keyup with hard-coded map.
无论如何,一个更简单的解决方案是仅添加另一个事件处理程序以使用硬编码映射进行键控。
Thanks to @serakfalcon for (that simple solution) , which we are using here: 感谢@serakfalcon提供的(这个简单的解决方案) ,我们在这里使用它:
$('#txt1').keydown(function(event) {
if(8 == event.keyCode) {
var el = $(this);
el.val(el.val().replace(/\[(Tab|Enter|Shift|Ctrl|Alt|Break|Caps Lock|Esc|Space|Page (Up|Down)|End|Home|Left|Up|Right|Down|Insert|Delete)\]$/,' '));
$("#txt2").val(el.val());
}
});
you can always use a regex. 您可以随时使用正则表达式。
$('#textbox1').keydown(function(event) {
if(8 == event.keyCode) {
var el = $(this);
el.val(el.val().replace(/\[(CTRL|ALT|SHIFT)\]$/,' '));
}
});
Edit: combined with abhitalks code 编辑: 结合了Abhitalks代码
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.