Как показать блок div только тогда, когда определенный ввод фокусируется с использованием JavaScript? - PullRequest
Новая
       31

Как показать блок div только тогда, когда определенный ввод фокусируется с использованием JavaScript?

1 голос
/ 20 июня 2019

Я пытался использовать функцию onfocus в JavaScript для отображения блока, когда поле пароля сфокусировано в файле .php (разработано с использованием начальной загрузки 4), но когда я щелкаю по полю passsword, ничего не происходит.

Я пытался использовать тот же код jQuery, но по-прежнему ничего не получалось. 

var myInput = document.getElementById("password");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");

myInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
}


myInput.onblur = function() {
  document.getElementById("message").style.display = "none";
}
<div class="form-group">
  <div class="input-group-prepend">
    <span class="input-group-text">
                        <i class="fa fa-key"></i>
                    </span>
    <input required type="password" class="form-control" placeholder="Password" name="password" id="password">
  </div>

  <div id="message">
    <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
    <p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
    <p id="number" class="invalid">A <b>number</b></p>
    <p id="length" class="invalid">Minimum <b>8 characters</b></p>
  </div>

Ответы [ 2 ]

1 голос
/ 20 июня 2019

Есть три возможных проблемы с вашим кодом.

1) Элемент form-group не был закрыт, поэтому ваш браузер, возможно, неправильно интерпретировал код, испортив его структуру.

2) Когда страница загружается, никакие события не сработали; поэтому по умолчанию ваш message div будет виден. Когда вы фокусируете на password, а затем не фокусируете его, message исчезает. Чтобы это исправить, добавьте style="display: none;" к вашему message div.

3) Самое главное, ваш скрипт должен выполняться ПОСЛЕ загрузки документа. Вы можете легко сделать это, поместив весь ваш скрипт в функцию document.ready JQuery: 

$(function(){
    //Do everything here. This function will only execute after the document is ready.
}

Или, как я сделал, просто поместите свой тег script в ДНО страницы. Таким образом, ваш скрипт будет загружен после загрузки остальной части страницы.

Причина этого проста. Когда ваш браузер загружает страницу, он загружает каждый элемент один за другим, больше или меньше. Скрипты выполняются, как только они загружены. Так что, если ваш скрипт запускается до загрузки остальной части HTML, ничего не произойдет. 

<div class="form-group">
	<div class="input-group-prepend">
		<span class="input-group-text">
			<i class="fa fa-key"></i>
		</span>
		<input required type="password" class="form-control" placeholder="Password" name="password" id="password">
	</div>

	<div id="message" style="display: none;">
		<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
		<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
		<p id="number" class="invalid">A <b>number</b></p>
		<p id="length" class="invalid">Minimum <b>8 characters</b></p>
	</div>
	<script>
		// this is my javascript code
		var myInput = document.getElementById("password");
		var letter = document.getElementById("letter");
		var capital = document.getElementById("capital");
		var number = document.getElementById("number");
		var length = document.getElementById("length");

		myInput.onfocus = function() {
			document.getElementById("message").style.display = "block";
		}


		myInput.onblur = function() {
			document.getElementById("message").style.display = "none";
		}
	</script>
</div>
0 голосов
/ 20 июня 2019

Это должно сработать: 

const $ = (selector) => document.querySelector(selector);
const input = $('#password');
const message = $('.message');

input.addEventListener('focus', (e) => {
    message.style.display = 'block';
});

input.addEventListener('blur', (e) => {
    message.style.display = 'none';
});
.message {
    display: none;
}
<div class="form-group">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fa fa-key"></i>
        </span>
        <input required type="password" class="form-control" placeholder="Password" name="password" id="password">
    </div>

    <div class="message">
        <p class="letter invalid">A <b>lowercase</b> letter</p>
        <p class="capital invalid">A <b>capital (uppercase)</b> letter</p>
        <p class="number invalid">A <b>number</b></p>
        <p class="length invalid">Minimum <b>8 characters</b></p>
    </div>
</div>
...