作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
假设文本区域已包含文本,例如:AA。我们如何检测按下的键并仅用其他字符更改这个字符。现在,如果通过键盘按下 A 键,文本应变为 AAB 已存在的 A 字符保持不变,但新按下的 A 键应在文本区域中写入 B。
我的代码是
<textarea>aa</textarea>
<script>
jQuery('textarea').keyup(function (e) {
//THIS REPLACES ALL THE TEXT NOT JUST THE PRESSED CHARACTER
//Need code that should replace just this pressed key not all text of textarea
jQuery('textarea').val(jQuery('textarea').val().replace(/a/g, "b"));
});
</script>
理想的解决方案将从按下的键e
中选择字符并替换它,但如果不可能,那么替换文本区域中的最后一个字符可能是一个糟糕的解决方法。
如果使用 keypress
、keydown
或类似事件,也可以。
最佳答案
试试这个:
因为e.keyCode
是只读的。我阻止它输入并添加更改的字符。
感谢 MarkPiezak,部分代码来自此处:Set keyboard caret position in html textbox
$(function(){
$("#ta").keydown(function(e){
var newKey = e.keyCode + 1;
var newChar = String.fromCharCode(newKey);
$("#pressed-key").text(e.keyCode + "->" + newKey + "->" + newChar);
if (e.keyCode > 47 && e.keyCode < 91) {
e.preventDefault();
var cursorPosition = $('textarea').prop("selectionStart");
var ta = document.getElementById("ta");
ta.value = [ta.value.slice(0, cursorPosition), newChar, ta.value.slice(cursorPosition)].join('');
setCaretPosition("ta", cursorPosition+1);
}
});
//This one is from https://stackoverflow.com/questions/512528/set-cursor-position-in-html-textbox
function setCaretPosition(elemId, caretPos) {
var elem = document.getElementById(elemId);
if(elem != null) {
if(elem.createTextRange) {
var range = elem.createTextRange();
range.move('character', caretPos);
range.select();
}
else {
if(elem.selectionStart) {
elem.focus();
elem.setSelectionRange(caretPos, caretPos);
}
else
elem.focus();
}
}
}
$("#ta2").keydown(function(e){
var sentence = "I am a monster!";
if (e.keyCode > 47 && e.keyCode < 91) {
e.preventDefault();
var ta = document.getElementById("ta2");
ta.value += sentence[ta.value.length] || "";
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="ta">aa</textarea>
<p id="pressed-key"></p>
<hr>
<p>This one is just for fun. Try answering this: Who are you?</p>
<textarea id="ta2"></textarea>
关于javascript - 如何仅替换按下的字符;使用 JavaScript/jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34703192/
我是一名优秀的程序员,十分优秀!