Блог

Главная - Вопросы по программированию - HTML: Как ввести автопрокрутку во входные данные?(последнее, что добавлено, должно быть видно всегда)

HTML: Как ввести автопрокрутку во входные данные?(последнее, что добавлено, должно быть видно всегда)

#javascript #html #input #scroll #focus

#javascript #HTML #ввод #прокрутите #фокус #прокрутка

Вопрос:

 function addHee(){
    
document.getElementById("Display2").value = document.getElementById("Display2").value   "Hee";

}

function addAaA(){
    
document.getElementById("Display2").value = document.getElementById("Display2").value   "AaA";

}  
 <html>
<head>
<meta charset="UTF-8">
</head>

<body>

<input type="text" id="Display2"name="Display2" class="displays" value="HelloMan" >

<input type="button" class="Hee" value="Hee"onClick="addHee()">
<input type="button" class="AaA" value="AaA"onClick="addAaA()">

</body>
</html>

При добавлении символов внутри ввода щелчком мыши и вводом текста всегда отображается последнее введенное значение.

Но при добавлении символов с помощью кнопок нет необходимости фокусироваться на просмотре того, что было введено последним, оно просто всегда показывает начало.

Я хочу, чтобы последняя введенная часть всегда была видна при добавлении символов с помощью кнопок. Я ничего не смог найти в атрибутах входного тега.

Ответ №1:

Сделайте это:

 function addHee() {
  const input = document.getElementById("Display2");
  input.value = input.value   "Hee";
  input.focus();
  input.setSelectionRange(input.value.length, input.value.length);
}

сделайте то же самое для обеих функций.

Ответ №2:

@Faisal Khan

Я сделал это так для обеих функций:

 function addHee(){
let ta = document.getElementById('Display2');
document.getElementById("Display2").value = document.getElementById("Display2").value   "Hee";
ta.scrollLeft = ta.scrollWidth;
}

в чем разница?

Комментарии:

1. Есть много способов что-то сделать, ваше решение тоже подойдет.

2. Одно предложение для вас. Сделайте это: ta.value = ta.value «Хи»: чтобы сократить код