我正在使用Summernote插件来创建一个漂亮的文本区域和 Mark.js用于突出显示该文本区域内定义的关键字(例如 foo
)的插件。
我有这个 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 })
}})
}
}
}
);
而且运行良好。每次用户在文本区域中写入 foo
时,该单词都会突出显示,但我遇到这个问题:当用户写入 foo
时,光标会移动到 的开头>foo
这个词,我不想要这个。我该如何解决这个问题?
最佳答案
可编辑的 div 不是处理输入的理想类型。当使用 JS 或 jQuery 显式更新可编辑 div 的值时,类似的光标行为很常见。要解决此问题,您需要使用合适的默认输入类型,例如 <input>
和<textarea>
标签。
这并不能解决您的用例,因为您无法更改所选文本的属性。所以客户端的解决方案如下:
- 创建一个全局变量来存储每个此类可编辑 div 的光标更新值。
- 在每个 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]" );
}
关于javascript - 突出显示关键字的文本区域 : strange cursor behavior,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46667222/