什么是最好的方法(我假设最简单的方法)，以放置光标在文本的输入文本元素的末尾通过JavaScript -焦点已设置到元素?
当前回答
检查这个解决方案!
//fn setCurPosition $.fn.setCurPosition = function(pos) { this.focus(); this.each(function(index, elem) { if (elem.setSelectionRange) { elem.setSelectionRange(pos, pos); } else if (elem.createTextRange) { var range = elem.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } }); return this; }; // USAGE - Set Cursor ends $('#str1').setCurPosition($('#str1').val().length); // USAGE - Set Cursor at 7 position // $('#str2').setCurPosition(7); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Set cursor at any position</p> <p><input type="text" id="str1" value="my string here" /></p> <p><input type="text" id="str2" value="my string here" /></p>
其他回答
我以前尝试过这些建议，但没有一个对我有效(在Chrome中测试了它们)，所以我写了自己的代码-它在Firefox, IE, Safari, Chrome中工作得很好……
在短信中：
onfocus() = sendCursorToEnd(this);
在Javascript中:
function sendCursorToEnd(obj) {
var value = obj.value; //store the value of the element
var message = "";
if (value != "") {
message = value + "\n";
};
$(obj).focus().val(message);}
超级简单(你可能需要关注input元素)
inputEl = getElementById('inputId');
var temp = inputEl.value;
inputEl.value = '';
inputEl.value = temp;
拿出一些答案。制作单行jquery。
$('#search').focus().val($('#search').val());
在jQuery中，这是
$(document).ready(function () {
$('input').focus(function () {
$(this).attr('value',$(this).attr('value'));
}
}
我从这里得到了最好的答案，并创建了一个在Chrome中工作良好的功能。
您需要将逻辑封装在一个超时中，因为您必须等待焦点完成后才能访问所选内容 要将光标放在末尾，选择起始点需要放在末尾 为了滚动到输入字段的末尾，scrollLeft需要匹配scrollWidth
/** * Upon focus, set the cursor to the end of the text input * @param {HTMLInputElement} inputEl - An HTML <input> element */ const setFocusEnd = (inputEl) => { setTimeout(() => { const { scrollWidth, value: { length } } = inputEl; inputEl.setSelectionRange(length, length); inputEl.scrollLeft = scrollWidth; }, 0); }; document .querySelector('input') .addEventListener('focus', (e) => setFocusEnd(e.target)); html, body { width: 100%; height: 100%; margin: 0; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; } input:focus { background-color: hsla(240, 100%, 95%, 1.0); } <input type="text" placeholder="Search..." value="This is some really, really long text">
