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

Question

我尝试使用 JavaScript 中的 onfocus 函数在密码字段集中在 .php 文件中时显示块（使用 bootstrap 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 没有关闭，所以你的浏览器可能有 mis-interpreted 代码，弄乱了它的结构。

2) 页面加载时，没有触发任何事件；所以默认情况下，您的 message div 将可见。当您关注 password 然后关注 un-focus 时，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 块？

How to show a div block only when a particular input is focused using JavaScript?

html

javascript

onfocus

onblur