javascript - 如何仅在使用 JavaScript 聚焦特定输入时显示 div block ？

Question

我尝试使用 JavaScript 中的 onfocus 函数在密码字段聚焦于 .php 文件(使用 bootstrap 4 设计)时显示 block ，但是当我点击密码字段时没有任何反应。

我尝试使用 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>

Answer 1

您的代码可能存在三个问题。

1) form-group div 没有关闭，因此您的浏览器可能误解了代码，弄乱了它的结构。

2) 页面加载时，没有触发任何事件；所以默认情况下，您的 message div 将是可见的。当您关注 password 然后取消关注它时，message 会消失。要解决此问题，请将 style="display: none;" 添加到您的 message div。

3) 最重要的是，您的脚本需要在文档加载后执行。您可以通过将所有脚本放入 JQuery document.ready 函数中轻松地做到这一点:

$(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>