如何使用jQuery在文本字段中设置光标位置？我有一个包含内容的文本字段,我希望用户光标在关注字段时定位在某个偏移处.代码应该看起来像这样:
$('#input').focus(function() {
$(this).setCursorPosition(4);
});
setCursorPosition函数的实现是什么样的？如果您有一个内容为abcdefg的文本字段,则此调用将导致光标定位如下:abcd**|**efg.
Java有一个类似的功能,setCaretPosition.javascript是否存在类似的方法？
更新:我修改了CMS的代码以使用jQuery,如下所示:
new function($) {
$.fn.setCursorPosition = function(pos) {
if (this.setSelectionRange) {
this.setSelectionRange(pos, pos);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
if(pos < 0) {
pos = $(this).val().length + pos;
}
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
}(jQuery);
我正在使用一个明确的跨浏览器解决方案,当contentEditable ='on'<div>重新获得焦点时,将光标/插入位置设置为最后的已知位置.看来内容可编辑div的默认功能是每次单击它时将插入符/光标移动到div中文本的开头,这是不合需要的.
我相信当他们离开div的焦点时我必须在变量中存储当前光标位置,然后当他们再次聚焦时重新设置它,但是我无法将它组合在一起,或者找不到工作代码示例.
如果有人有任何想法,工作代码片段或样本我很乐意看到它们.
我还没有任何代码,但这里有我所拥有的:
<script type="text/javascript">
// jQuery
$(document).ready(function() {
$('#area').focus(function() { .. } // focus I would imagine I need.
}
</script>
<div id="area" contentEditable="true"></div>
PS.我已经尝试过这个资源,但它似乎不适用于<div>.也许只适用于textarea(如何将光标移动到可信实体的末尾)
在我的项目中,我试图将插入位置始终设置为文本的末尾.我知道这是默认行为,但是当我们动态添加一些文本时,插入符号位置会更改为Chrome和firefox中的起点(IE很好,太棒了).
无论如何要使它在chrome和firefox中正常工作？
这是小提琴
<div id="result" contenteditable="true"></div>
<button class="click">click to add text</butto>
var result = $('#result');
$('.click').click(function () {
var preHtml = result.html();
result.html(preHtml + "hello");
result.focus();
});
我尝试添加,setStart并setEnd在此链接中提到,但没有用.
我有一个contenteditable div,每个textchange后都通过javascript编辑内容(textchange.js)比如添加html标签(只有span-tags用于更改某些单词的颜色)以及在这里和那里添加或删除一些空格,但我的问题是因为内容在用户编辑时被更改,所以插入符改变其位置在每次按键之后,几乎不可能写出单个单词.我正在寻找一种防止这种跳跃的方法,我已经考虑过添加一个特殊的字符串,在编辑它之前不会被用作插入符号位置的一种标记,将其删除当完成并将插入符号放回到这个位置时,但由于我正在使用正则表达式(目前每次文本更改后大约25次),这个特殊字符几乎会毁掉它们中的每一个,我将不得不添加类似的东西\x40? 每个地方,根本不会看起来漂亮和清晰:
/\s<span class="b0">hello\sworld</span>/g
至:
/\s\x40?<span class="b0">\x40?h\x40?e\x40?l\x40?l\x40?o\x40?\s\x40?w\x40?o\x40?r\x40?l\x40?d\x40?</span>/g
我不知道它是否有帮助,但这里有一个关于如何更改内容的示例(在每次按键之后):
foo +++ <span class="c3">bar</span> - baz -<span class="c0">qux</span>
至:
<span class="c1">foo</span> + <span class="c3">bar</span> - <span class="c1">baz</span> * <span class="c0">qux</span>
对于如何解决这个问题的每一个建议,提示或提示,或者更好的方法来做这个标记,我将不胜感激.
谢谢 :)
我想创建一个自定义退格按钮,其逻辑与键盘上的"退格"按钮相同.我使用以下代码:
function backSpace()
{
var e = jQuery.Event("keyup");
e.which = 8; // # Some key code value
e.keyCode = 8;
$("mainDiv").trigger(e);
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<script src="formulas.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=no"/>
</head>
<button onclick="backSpace()">backSpace</button>
<body id="main" spellcheck="false">
<div id = "mainDiv" contenteditable="true"></div>
</body>
</html>但它不起作用.我不明白我做错了什么.我花了很多时间来解决这个问题,但我还没有解决它.请帮帮我.