Javascript 突出显示关键字的文本区域:奇怪的光标行为
我正在使用插件创建一个漂亮的文本区域,并使用插件突出显示该文本区域内定义的关键字,例如foo 我有以下HTML代码:Javascript 突出显示关键字的文本区域:奇怪的光标行为,javascript,jquery,html,textarea,summernote,Javascript,Jquery,Html,Textarea,Summernote,我正在使用插件创建一个漂亮的文本区域,并使用插件突出显示该文本区域内定义的关键字,例如foo 我有以下HTML代码: <div id="text"></div> 而且效果很好。每次用户在文本区域中写入foo时,单词都会突出显示,但我有一个问题:当用户写入foo时,光标会移动到foo单词的开头,我不希望这样。我如何解决这个问题?这是因为突出显示的文本将获得一个foo标记。您必须将光标设置在该标记的末尾。如果你有时间,我会在一小时内用解决方案更新这篇文章。可编辑div不是处
<div id="text"></div>
而且效果很好。每次用户在文本区域中写入foo时,单词都会突出显示,但我有一个问题:当用户写入foo时,光标会移动到foo单词的开头,我不希望这样。我如何解决这个问题?这是因为突出显示的文本将获得一个foo标记。您必须将光标设置在该标记的末尾。如果你有时间,我会在一小时内用解决方案更新这篇文章。可编辑div不是处理输入的理想类型。类似的游标行为在使用JS或jQuery显式更新可编辑div的值时很常见。要解决这个问题,您需要使用合适的默认输入类型,如和标记 这并不能解决您的用例,因为您将无法更改所选文本的属性。因此,客户端的解决方案如下: 创建一个全局变量来存储每个此类可编辑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]" );
}
是的,如果你有更好的代码,它会对我有很大帮助谢谢你,我理解这个概念,但是我很难实现你的解决方案。这就是我尝试过的,您提供的fiddle在summernote.js中隐藏元素时抛出错误。请看一下。代码有一些小改动:1。使用-1 2初始化全局变量。将元素传递给函数时,需要传递其0索引。setCaretPosition$”。注意可编辑“[0],全局变量;doGetCaretPosition$”。注释可编辑“[0],全局变量;每当关键字高亮显示时,小提琴仍然会抛出错误。
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]" );
}