Каков наилучший способ (и я предполагаю самый простой способ) поместить курсор в конец текста во входном текстовом элементе через JavaScript - после того, как фокус установлен на элемент?
Использовать JavaScript для размещения курсора в конце текста в текстовом элементе ввода
Ответ 1
Я столкнулся с этой же проблемой (после настройки фокуса через RJS/prototype) в IE. Firefox уже оставил курсор в конце, когда уже есть значение для поля. IE заставлял курсор в начале текста.
Решение, к которому я пришел, выглядит следующим образом:
<input id="search" type="text" value="mycurrtext" size="30"
onfocus="this.value = this.value;" name="search"/>
Это работает как в IE7, так и в FF3
Ответ 2
Там есть простой способ заставить его работать в большинстве браузеров.
this.selectionStart = this.selectionEnd = this.value.length;
Однако, из-за * причуд нескольких браузеров, более инклюзивный ответ больше похож на этот
setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
Использование jQuery (для установки слушателя, но в противном случае это не требуется)
$('#el').focus(function(){
var that = this;
setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='el' type='text' value='put cursor at end'>Ответ 3
Попробуй, это сработало для меня:
//input is the input element
input.focus(); //sets focus to element
var val = this.input.value; //store the value of the element
this.input.value = ''; //clear the value of the element
this.input.value = val; //set that value back.
Чтобы курсор перемещался до конца, вход должен быть сфокусирован первым, а затем, когда значение будет изменено, оно закончится. Если вы установите значение в том же, оно не изменится в chrome.
Ответ 4
После небольшого взлома с этим я нашел лучший способ использовать функцию setSelectionRange, если браузер поддерживает ее; если нет, вернитесь к использованию метода в ответе Майка Берроу (т.е. замените значение самим).
Я также устанавливаю scrollTop на большое значение, если мы находимся в вертикально-прокручиваемом textarea. (Использование произвольного высокого значения кажется более надежным, чем $(this).height() в Firefox и Chrome.)
Я сделал это как плагин jQuery. (Если вы не используете jQuery, я надеюсь, что вы все равно сможете получить его достаточно.)
Я тестировал в IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, Opera 10.00.
Он доступен на jquery.com как PutCursorAtEnd плагин. Для вашего удобства, код для версии 1.0 выглядит следующим образом:
// jQuery plugin: PutCursorAtEnd 1.0
// http://plugins.jquery.com/project/PutCursorAtEnd
// by teedyay
//
// Puts the cursor at the end of a textbox/ textarea
// codesnippet: 691e18b1-f4f9-41b4-8fe8-bc8ee51b48d4
(function($)
{
jQuery.fn.putCursorAtEnd = function()
{
return this.each(function()
{
$(this).focus()
// If this function exists...
if (this.setSelectionRange)
{
// ... then use it
// (Doesn't work in IE)
// Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
var len = $(this).val().length * 2;
this.setSelectionRange(len, len);
}
else
{
// ... otherwise replace the contents with itself
// (Doesn't work in Google Chrome)
$(this).val($(this).val());
}
// Scroll to the bottom, in case we're in a tall textarea
// (Necessary for Firefox and Google Chrome)
this.scrollTop = 999999;
});
};
})(jQuery);
Ответ 5
<script type="text/javascript">
function SetEnd(txt) {
if (txt.createTextRange) {
//IE
var FieldRange = txt.createTextRange();
FieldRange.moveStart('character', txt.value.length);
FieldRange.collapse();
FieldRange.select();
}
else {
//Firefox and Opera
txt.focus();
var length = txt.value.length;
txt.setSelectionRange(length, length);
}
}
</script>
Эта функция работает для меня в IE9, Firefox 6.x и Opera 11.x
Ответ 6
Я пробовал следующее с довольно большим успехом в хроме
$("input.focus").focus(function () {
var val = this.value,
$this = $(this);
$this.val("");
setTimeout(function () {
$this.val(val);
}, 1);
});
Быстрое сокращение:
Он принимает каждое поле ввода с фокусом класса на нем, а затем сохраняет старое значение поля ввода в переменной, после чего он применяет пустую строку к полю ввода.
Затем он ждет 1 миллисекунду и снова ставит старое значение.
Ответ 7
Simple. При редактировании или изменении значений сначала установите фокус, затем установите значение.
$("#catg_name").focus();
$("#catg_name").val(catg_name);
Ответ 8
Тем не менее требуется промежуточная переменная (см. var val =) иначе курсор ведет себя странно, нам это нужно в конце.
<body onload="document.getElementById('userinput').focus();">
<form>
<input id="userinput" onfocus="var val=this.value; this.value=''; this.value= val;"
class=large type="text" size="10" maxlength="50" value="beans" name="myinput">
</form>
</body>
Ответ 9
Для всех браузеров для всех случаев:
function moveCursorToEnd(el) {
window.setTimeout(function () {
if (typeof el.selectionStart == "number") {
el.selectionStart = el.selectionEnd = el.value.length;
} else if (typeof el.createTextRange != "undefined") {
var range = el.createTextRange();
range.collapse(false);
range.select();
}
}, 1);
}
Требуется таймаут, если вам нужно переместить курсор из обработчика события onFocus
Ответ 10
В jQuery это
$(document).ready(function () {
$('input').focus(function () {
$(this).attr('value',$(this).attr('value'));
}
}
Ответ 11
Эта проблема интересна. Самое запутанное в этом заключается в том, что никакое решение, которое я нашел, не решило проблему полностью.
+++++++ РЕШЕНИЕ +++++++
-
Вам нужна функция JS, например:
function moveCursorToEnd(obj) { if (!(obj.updating)) { obj.updating = true; var oldValue = obj.value; obj.value = ''; setTimeout(function(){ obj.value = oldValue; obj.updating = false; }, 100); } } -
Вам нужно позвонить этому парню в onfocus и onclick события.
<input type="text" value="Test Field" onfocus="moveCursorToEnd(this)" onclick="moveCursorToEnd(this)">
ЭТО РАБОТАЕТ НА ВСЕХ УСТРОЙСТВАХ БРАУЗЕРОВ!!!!
Ответ 12
Взятие некоторых ответов.. создание однострочного jquery.
$('#search').focus().val($('#search').val());
Ответ 13
Если для поля ввода просто требуется статическое значение по умолчанию, я обычно делаю это с помощью jQuery:
$('#input').focus().val('Default value');
Это похоже на работу во всех браузерах.
Ответ 14
Я только что обнаружил, что в iOS параметр textarea.textContent будет помещать курсор в конец текста в элементе textarea каждый раз. Поведение было ошибкой в моем приложении, но, похоже, это то, что вы могли бы использовать намеренно.
Ответ 15
var valsrch = $('#search').val();
$('#search').val('').focus().val(valsrch);
Ответ 16
Хотя это может быть старый вопрос с большим количеством ответов, я столкнулся с подобной проблемой, и ни один из ответов не был тем, что я хотел и/или плохо объяснил. Проблема с параметрами selectionStart и selectionEnd заключается в том, что они не существуют для номера типа ввода (в то время как вопрос был задан для типа текста, я полагаю, это может помочь другим, у кого могут быть другие типы ввода, которые им необходимо сосредоточить). Поэтому, если вы не знаете, будет ли тип ввода, который будет фокусироваться функцией, это номер типа или нет, вы не можете использовать это решение.
Решение, которое работает с перекрестным браузером и для всех типов ввода, довольно просто:
- получить и сохранить значение ввода в переменной
- фокус ввода
- установите значение ввода в сохраненное значение
Таким образом, курсор находится в конце входного элемента.
Таким образом, все, что вы делаете, это что-то вроде этого (с использованием jquery, если элемент селектора элементов, который вы хотите сфокусировать, доступен с помощью атрибута данных "data-focus-element" элемента с щелчком, и функция выполняется после нажатия кнопки ".foo" ) элемент):
$('.foo').click(function() {
element_selector = $(this).attr('data-focus-element');
$focus = $(element_selector);
value = $focus.val();
$focus.focus();
$focus.val(value);
});
Почему это работает? Просто, когда вызывается .focus(), фокус будет добавлен в начало входного элемента (что является основной проблемой здесь), игнорируя тот факт, что элемент ввода уже имеет в нем значение. Однако, когда значение ввода изменяется, курсор автоматически помещается в конец значения внутри входного элемента. Поэтому, если вы переопределите значение с тем же значением, которое ранее было введено во вход, значение будет выглядеть нетронутым, курсор, однако, переместится в конец.
Ответ 17
Установите курсор, когда нажимаете на текстовую область до конца текста... Изменение этого кода... ТАКЖЕ работает! для Firefox, IE, Safari, Chrome..
В серверном коде:
txtAddNoteMessage.Attributes.Add("onClick", "sendCursorToEnd('" & txtAddNoteMessage.ClientID & "');")
В Javascript:
function sendCursorToEnd(obj) {
var value = $(obj).val(); //store the value of the element
var message = "";
if (value != "") {
message = value + "\n";
};
$(obj).focus().val(message);
$(obj).unbind();
}
Ответ 18
Если вы установите значение сначала, а затем установите фокус, курсор всегда будет отображаться в конце.
$("#search-button").click(function (event) {
event.preventDefault();
$('#textbox').val('this');
$("#textbox").focus();
return false;
});
Вот скрипка для тестирования https://jsfiddle.net/5on50caf/1/
Ответ 19
Мне нравится принятый ответ, но он перестает работать в Chrome. В Chrome для перехода курсора в конец нужно изменить значение ввода. Решение следующее:
<input id="search" type="text" value="mycurrtext" size="30"
onfocus="var value = this.value; this.value = null; this.value = value;" name="search"/>
Ответ 20
Я хотел поместить курсор в конец элемента div, где contenteditable = true, и я получил решение с кодом Xeoncross:
<input type="button" value="Paste HTML" onclick="document.getElementById('test').focus(); pasteHtmlAtCaret('<b>INSERTED</b>'); ">
<div id="test" contenteditable="true">
Here is some nice text
</div>
И эта функция делает магию:
function pasteHtmlAtCaret(html) {
var sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// non-standard and not supported in all browsers (IE9, for one)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) ) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}
Отлично работает для большинства браузеров, пожалуйста, проверьте его, этот код помещает текст и помещает фокус в конец текста в элементе div (а не в элементе ввода)
https://jsfiddle.net/Xeoncross/4tUDk/
Спасибо, Xeoncross
Ответ 21
Я также столкнулся с такой же проблемой. Наконец, это сработает для меня:
jQuery.fn.putCursorAtEnd = = function() {
return this.each(function() {
// Cache references
var $el = $(this),
el = this;
// Only focus if input isn't already
if (!$el.is(":focus")) {
$el.focus();
}
// If this function exists... (IE 9+)
if (el.setSelectionRange) {
// Double the length because Opera is inconsistent about whether a carriage return is one character or two.
var len = $el.val().length * 2;
// Timeout seems to be required for Blink
setTimeout(function() {
el.setSelectionRange(len, len);
}, 1);
} else {
// As a fallback, replace the contents with itself
// Doesn't work in Chrome, but Chrome supports setSelectionRange
$el.val($el.val());
}
// Scroll to the bottom, in case we're in a tall textarea
// (Necessary for Firefox and Chrome)
this.scrollTop = 999999;
});
};
Вот как мы можем это назвать:
var searchInput = $("#searchInputOrTextarea");
searchInput
.putCursorAtEnd() // should be chainable
.on("focus", function() { // could be on any event
searchInput.putCursorAtEnd()
});
Он работает для меня в сафари, IE, Chrome, Mozilla. На мобильных устройствах я этого не пробовал.
Ответ 22
Проверьте это решение!
//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>Ответ 23
Это 2019 год, и ни один из вышеперечисленных методов не работал для меня, но этот работал, взятый из https://css-tricks.com/snippets/javascript/move-cursor-to-end-of-input/
function moveCursorToEnd(id) {
var el = document.getElementById(id)
el.focus()
if (typeof el.selectionStart == "number") {
el.selectionStart = el.selectionEnd = el.value.length;
} else if (typeof el.createTextRange != "undefined") {
var range = el.createTextRange();
range.collapse(false);
range.select();
}
}<input id="myinput" type="text" />
<a href="#" onclick="moveCursorToEnd('myinput')">Move cursor to end</a>Ответ 24
el.setSelectionRange(-1, -1);
https://codesandbox.io/s/peaceful-bash-x2mti
Этот метод обновляет свойства HTMLInputElement.selectionStart, selectionEnd и selectionDirection за один вызов.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
В других методах js -1 обычно означает (до) последний символ. Это касается и этого, но я не смог найти явного упоминания об этом поведении в документации.
Ответ 25
Я пробовал предложения раньше, но никто не работал у меня (тестировал их в Chrome), поэтому я написал свой собственный код - и он отлично работает в Firefox, IE, Safari, Chrome...
В Textarea:
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);}
Ответ 26
Вот мой ответ: jsFiddle demo. Демо использует CoffeeScript, но вы можете конвертировать его в обычный JavaScript, если вам нужно.
Важная часть в JavaScript:
var endIndex = textField.value.length;
if (textField.setSelectionRange) {
textField.setSelectionRange(endIndex, endIndex);
}
Я отправляю этот ответ, потому что я уже написал его для кого-то другого, у кого был тот же вопрос. Этот ответ не охватывает столько случаев кросс, как верхние ответы здесь, но он работает для меня и имеет jsFiddle демо, с которым вы можете играть.
Вот код из jsFiddle, поэтому этот ответ сохраняется, даже если jsFiddle исчезает:
moveCursorToEnd = (textField) ->
endIndex = textField.value.length
if textField.setSelectionRange
textField.setSelectionRange(endIndex, endIndex)
jQuery ->
$('.that-field').on 'click', ->
moveCursorToEnd(this)
<div class="field">
<label for="pressure">Blood pressure</label>:
<input class="that-field" type="text" name="pressure" id="pressure" value="24">
</div>
<p>
Try clicking in the text field. The cursor will always jump to the end.
</p>
body {
margin: 1em;
}
.field {
margin-bottom: 1em;
}
Ответ 27
Попробуйте использовать следующий код:
$('input').focus(function () {
$(this).val($(this).val());
}).focus()
Ответ 28
Хотя я отвечаю слишком поздно, но для будущих запросов это будет полезно. И он также работает в contenteditable div.
Оттуда вам нужно установить фокус в конце; напишите это code-
var el = document.getElementById("your_element_id");
placeCaretAtEnd(el);
И функция -
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
Ответ 29
input = $('input');
input.focus().val(input.val()+'.');
if (input.val()) {input.attr('value', input.val().substr(0,input.val().length-1));}
Ответ 30
Ну, я просто использую:
$("#myElement").val($("#myElement").val());