Как «отключить» элемент ввода HTML, пока он не нажмет? - PullRequest
Новая
       9

Как «отключить» элемент ввода HTML, пока он не нажмет?

0 голосов
/ 01 мая 2020

Я хочу элемент HTML <input type="text">, по которому нужно щелкнуть, прежде чем его можно будет редактировать. Примерно так же, как в Windows или Ma c OS Finder, вам нужно щелкнуть имя файла, прежде чем оно станет редактируемым.

Сначала я попытался установить <input> в disabled и JavaScript, который «включает» его при нажатии. Это было именно то, что я хотел в Chrome, но не работало в Firefox, потому что в Firefox очевидно, что отключение отключает его способность реагировать на клики.

Как мне получить такое поведение, которое хорошо работает в современных браузерах?

Ответы [ 2 ]

2 голосов
/ 01 мая 2020

Вы можете прослушать родительский div и проверить, нажал ли ввод, а затем включить его.

Обновленный ответ работает и в firefox. 

function enableInput() {
		if(event.target.id == 'text-input-overlay') {
			event.target.style.display = "none";
			document.getElementById("text-input").disabled = false;
		}
	}
<html>
<body>
<div style="position:relative;" id="container" onclick="enableInput()">
  <label for="text-input">Input: </label>
  <input id="text-input" type="text" disabled />
  <div id="text-input-overlay" style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;" ></div>
</div>
</body>
</html>
1 голос
/ 01 мая 2020

Вы можете сбросить стили ввода по умолчанию с помощью CSS, чтобы он выглядел как обычный текст / элемент. Затем используйте события фокуса и размытия для переключения. 

const input = document.querySelector('input[type="text"]');

input.addEventListener('focus', (event) => {
  event.target.classList.remove('disabled');    
});

input.addEventListener('blur', (event) => {
  event.target.classList.add('disabled');     
});
.disabled {
  border: none;
  background: #ccc;
}
<input id="text-input" type="text" class="disabled" value="Click Me" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...