带有关键字的Textarea突出显示:奇怪的光标行为
我正在使用Summernote插件创建一个漂亮的textarea和Mark.js插件,以突出显示textarea中定义的关键字(例如foo
)。带有关键字的Textarea突出显示:奇怪的光标行为
我有这样的HTML代码:
<div id="text"></div>
和JavaScript代码:
$('#text').summernote({
height: 150,
callbacks: {
onChange: function (contents, $editable){
$('.note-editable').unmark({"done": function() {
$('.note-editable').mark(
'foo',
{'separateWordSearch': false })
}})
}
}
}
);
,它的工作好。每当用户在textarea中写入foo
时,该单词都被高亮显示,但是我遇到了这个问题:当用户写入foo
时,光标移动到foo
单词的开头,我不希望这样。我怎样才能解决这个问题?
那是因为您突出显示的文字会变成标记。您必须在该标签的末尾设置光标。如果您有时间,我将在一小时内通过解决方案更新此文章。
可编辑的div不是处理输入的理想类型。类似的游标行为在可编辑div的值正在使用JS或jQuery进行显式更新时很常见。要解决此问题,您需要使用合适的默认输入类型,如<input>
和<textarea>
标签。
而这并不能解决您的使用案例,因为您无法更改所选文本的属性。因此,解决办法是作为客户端如下:
- 创建一个全局变量来存储游标的更新值对每个这样的编辑股利。
- 在每个onblur事件中更新此全局变量的值。
- 在突出显示关键字之前检索此全局值。
- 进行必要的关键字高亮后,将光标更新为检索的值。
以下是函数来检索和更新光标值:
function doGetCaretPosition (id, storeTo) {
var oField = document.getElementById(id);
// Initialize
var iCaretPos = -1;
// IE Support
if (document.selection) {
// Set focus on the element
oField.focus();
// To get cursor position, get empty selection range
var oSel = document.selection.createRange();
// Move selection start to 0 position
oSel.moveStart('character', -oField.value.length);
// The caret position is selection length
iCaretPos = oSel.text.length;
}
// Firefox support
else if (oField.selectionStart || oField.selectionStart == '0')
iCaretPos = oField.selectionStart;
// Return results
if(window[storeTo] !== undefined || window[storeTo] !== '')
{
//if position is not updated
if($(oField).val().length == iCaretPos)
window[storeTo] = -1;
else
window[storeTo] = iCaretPos;
console.log("[doGetCaretPosition Updated] "+$(oField).attr('id')+" in : "+window[storeTo]);
}
else
console.log("[doGetCaretPosition : failed]");
}
//Set caret position
function setCaretPosition(elemId, caretPos) {
var elem = document.getElementById(elemId);
if(elem != null) {
if(elem.createTextRange) {
var range = elem.createTextRange();
range.move('character', window[caretPos]);
range.select();
}
else {
if(elem.selectionStart) {
elem.focus();
elem.setSelectionRange(window[caretPos], window[caretPos]);
}
else
elem.focus();
}
}
console.log("[setCaretPosition Updated]");
}
谢谢祖阿曼,我理解这个概念,但我很难实施您的解决方案。这是我尝试过的https://jsfiddle.net/k4n9hhc1/8/ – EstevaoLuis
在summernote.js中隐藏元素时,您提供的小提琴会引发错误。请看看它。 – Aman
以下是新更新的小提琴https://jsfiddle.net/k4n9hhc1/11/ – EstevaoLuis
是的,如果你有一个更好的代码,这将有助于我很多 – EstevaoLuis