Javascript::如何确定什么样的角色(or string)插入一个编辑div?
-
26-09-2019 - |
题
我想知道如何识别的什么字插入一个div编辑...我想看看如果用户类型的单一或双引号,并得到一个特定类的这句话以后的文本的报价...我认为这是一个onkey财产或返回...我不知道...
任何人都具有尖端?
解决方案
的 keypress
事件是你想要的,因为这是唯一的事件,从中可以收集有关信息的性格类型。你可以处理的按键在自己的情况的报价。该插入一个代码 <span>
与CSS类不包括在这里。我建议要求的另一个问题,如果你需要帮助,或者也许阅读了一些文档 DOM范围, TextRanges 并选择 在即 和 其他的浏览器.
function handleKeypress(evt) {
evt = evt || window.event;
var charCode = evt.which || evt.keyCode;
var charStr = String.fromCharCode(charCode);
if (charStr == "'" || charStr == '"') {
// Code to insert quote character followed by <span> with CSS class
// goes here.
// Prevent the default action
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
}
}
var div = document.getElementById("your_div");
if (div.addEventListener) {
div.addEventListener("keypress", handleKeypress, false);
} else if (div.attachEvent) {
div.attachEvent("onkeypress", handleKeypress);
}
其他提示
我不知道我完全明白你想什么来做,但是看来你想要捕获的用户输入的到div与contentEditable属性。如果我们使用 脱 和 萤火虫 我会开始下:
$('idOfEditableDiv').addEvent('keydown', function(event) {
console.log(event.key);
});
即将印成的萤火虫控制台任何关键的就是按下内容编辑的div。所以如果我按的"一个"关键,'a'将被打印出来。这可能是有用的,如果你正在寻找捕获的输入,没有一个明显的值如Caps Lock关键。记录整个事件 console.log(event)
可以给你更多的有用的信息。
当您已经确定了哪些钥匙,你想要捕捉(说的a和b键的),然后做到以下几点:
$('idOfEditableDiv').addEvent('keydown', function(event) {
if(event.key == 'a' || event.key == 'b') {
//do stuff here if the a or b key was pressed
}
});
有时候你也许想要做的东西,如果一个关键的是压制和其他的东西如果b键。在这种情况下,做到以下几点:
$('idOfEditableDiv').addEvent('keydown', function(event) {
if(event.key == 'a') {
//do stuff here if the a key was pressed
}
else if(event.key == 'b') {
//do stuff here if the b key was pressed
}
});
在情况下你不熟悉脱,你会需要所有你的包裹脱码在domReady这样的事件:
window.addEvent('domready', function() {
$('idOfEditableDiv').addEvent('keydown', function(event) {
if(event.key == 'a') {
//do stuff here if the a key was pressed
}
else if(event.key == 'b') {
//do stuff here if the b key was pressed
}
});
});
不隶属于 StackOverflow