当我输入我的代码标签并使用下面的脚本更新上下文时,它会继续将光标移动到代码框的开头。我该如何解决?
function HastTagLocation(Controll) {
var controller = $('.' + Controll);
controller.keyup(function() {
// Get the code element.
var e = $(this);
// Get the text content.
var text = e.text();
// Replace the matches and wrap them with span tag.
var text = text.replace(/(\![a-zA-Z]*)/g, '<span class="mark">$1</span>');
// Set the html of the original element.
e.html(text);
});
};
$(document).ready(function() {
HastTagLocation('form-control');
});
.hash {
background-color: #808080;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code class="form-control" id="test" contenteditable="true" style="height: 100%; min-height: 100px"></code>
如何解决这个问题?
感谢您的时间和帮助。
更新
解决方案不是让光标跳转到文本的末尾,而是让光标跳回到我最后写的东西
答案 0 :(得分:0)
我认为一个解决方案是使用两个不同的元素,一个是您实际编写代码,使用透明颜色,或另一种隐藏其内容的方式,另一个是实际显示您想要显示的内容。< / p>
希望这有帮助。
答案 1 :(得分:0)
要使其正常工作,您可以使用input
事件而不是keyup
(这样,即使按住键,它也会在每次输入后触发)。然后使用Selection
和Range
对象相应地更改插入位置。例如,Range
具有setStart
和setEnd
方法,可让您将carret移动到特定位置。
要获得这些对象的更高精度,请参阅:https://developer.mozilla.org/en-US/docs/Web/API/Range和https://developer.mozilla.org/en-US/docs/Web/API/Selection(请注意,这些对象上的某些功能仍在实验中)
以下是使用代码的快速示例。 请注意,这不是完全可操作的,为了使其正常工作,当感叹号生成元素时,您必须相应地进行调整以使插入符号处于正确的位置。您还可能需要处理特定键输入(如 Suppr 或 Backspace )与额外元素的交互。
function HastTagLocation(Controll) {
var controller = $('.' + Controll);
controller.on('input', function (evt) {
// Storing the caret state
var sel, range, start, end ;
sel = window.getSelection();
range = sel.getRangeAt(0);
start = range.startOffset;
end = range.endOffset;
// Get the code element.
var e = $(this);
// Get the text content.
var text = e.text();
// Replace the matches and wrap them with span tag.
var text = text.replace(/(\![a-zA-Z]*)/g, '<span class="mark">$1</span>');
// Set the html of the original element.
e.html(text);
// restoring the caret
range.setStart(this.childNodes[0], start);
range.setEnd(this.childNodes[0], end);
});
};
$(document).ready(function () {
HastTagLocation('form-control');
});
.hash {
background-color:#808080;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code class="form-control" id="test" contenteditable="true" style="height: 100%; min-height: 100px"></code>