Question

我尝试使用JavaScript中的onfocus函数在密码字段集中在.php文件（使用引导程序4设计）中时显示块，但是当我单击密码字段时，没有任何反应。

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

Answer 2

这应该可以解决问题：

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>

仅当使用JavaScript对特定输入进行聚焦时，如何显示div块？

2 个答案: