Настройка фокуса на ввод только с помощью скрипта - PullRequest
Новая
       0

Настройка фокуса на ввод только с помощью скрипта

0 голосов
/ 19 октября 2019

Я пытаюсь сфокусироваться на вводе текста без явных событий мыши, только событий на основе JavaScript.

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

Нажатие на кнопку, которая запускает тот же код, даст желаемый результат.

Вопрос в том, как я могу сделать это с чистыми событиями?

ОБНОВЛЕНИЕ: я воссоздаюситуация, когда я не контролирую публикацию HTML. Извиняюсь за то, что пропустил эту часть. 

var input = document.querySelector("input");
var btn = document.querySelector("#btn");

btn.addEventListener("click", function(event){
  //when triggered by a mouse click on the button, produces desired result
  console.log("click");
  input.focus();
});

setTimeout(function(e){
  var event = new Event("click");
  //does not produce desired result
  btn.dispatchEvent(event);
  //does not produce desired result
  btn.click();
}, 1000);
<input type="text">
<button id="btn">button</button>

согласно этой скрипке

Ответы [ 4 ]

2 голосов
/ 19 октября 2019

Ваш код работает нормально, только не в jsFiddle или в фрейме фрагмента переполнения стека.

Причина в том, что когда вы нажимаете кнопку «Выполнить», вы фактически делаете акцент на другой странице (другом элементе окна). Таким образом, после того, как тайм-аут имитирует нажатие кнопки, ваш элемент хорошо сфокусирован, а ваша страница - нет, поэтому вы его не видите.

Вы можете попробовать установить задержку на 5 секунд, затем щелкнуть в любом месте окна предварительного просмотра до того, как тайм-аут имитирует щелчок, и вы увидите, что ваш ввод будет фокусироваться точно так же, как при нажатии на кнопку. Вы также можете получить доступ к текущему сфокусированному элементу с помощью document.activeElement

var input = document.querySelector("input");

var btn = document.querySelector("#btn");

console.log('active element:', document.activeElement);

btn.addEventListener("click", function(event) {
  //when triggered by a mouse click on the button, produces desired result
  console.log("click");
  input.focus();
});

setTimeout(function(e) {
  var event = new Event("click");
  //does not produce desired result
  btn.dispatchEvent(event);
  //does not produce desired result
  btn.click();
  console.log('active element:', document.activeElement);
}, 5000);
<input type="text" />
<button id="btn">
button
</button>
2 голосов
/ 19 октября 2019

Ваш код работает нормально. Кажется, что он работает не только на JS Fiddle. Ну, вы можете использовать "input type =" text "autofocus = true.

1 голос
/ 19 октября 2019

Без java-скрипта мы можем автоматически фокусировать текстовое поле, используя css

https://www.tutorialspoint.com/online_css_editor.php 

<head>
    <style>
    input[type=text]:focus{ outline: 3px solid red; }
    </style>
    </head>

   <input type="text" style="height: 28px; width:350px; " autofocus>
0 голосов
/ 19 октября 2019

Я не уверен, о каких событиях вы говорите, но вы можете вызывать сценарии при загрузке страницы в атрибуте body onload? Это выделит ввод, когда вы загрузите страницу, например: 

   <html>
     <body onload='document.querySelector("input").focus()'>
       <input type="text" />
     </body>
   </html>

См. Эту скрипку

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...