当我 select 输入框时，如何将“您正在输入数字”放在输入框的正下方？

Question

CSS:

.Input { background-color:grey; }
.Input:focus { background-color: white; }

HTML:

Enter the first number:<br>
<br>
Enter the second number:<br>
<br>
Enter the third number:<br>
<br>
Enter the fourth number:<br>
<br>
Enter the fifth number:<br>
<br>
<br>
Submit
<h1></h1>

JavaScript:

function get_product_of_inputs() {
        var a = document.getElementById("a").value;
        var b = document.getElementById("b").value;
        var c = document.getElementById("c").value;
        var d = document.getElementById("d").value;
        var e = document.getElementById("e").value;
        var f = a*b*c*d*e;
        console.log(f);
        document.getElementById("Submit").innerHTML= ("Product of all the numbers are "+f);
}

I am literally trying to put "you are entering a number" when someone select the input field. What can I do? Please help me out. I am a bit confused at this point?

Answer 1

use onfocus="yourjsfunc();" in your html code. For example:

<input id="a" type="text" onfocus="yourjsfunc();">

And use display:none and display:block to hide and show your text-element.

Answer 2

<form>
  <div>
    <label for="number">
      <input id="number" name="number">
      <span data-id="helper-text">You are entering a number</span>
    </label>
  </div>
  <div>
    <label for="foo">
      <input id="foo" name="foo">
      <span data-id="helper-text">You are entering foo</span>
    </label>
  </div>
</form>

CSS Approach

[data-id="helper-text"] {
  display: none;
}

label:focus-within [data-id="helper-text"] {
  display: inline-block;
}

JavaScript Approach

function changeHelperTextDisplay(target, style) {
  const helperTextEl = target
    .closest('label')
    ?.querySelector('[data-id="helper-text"]');
  if (helperTextEl) {
    helperTextEl.style.display = style;
  }
}

function handleFocus(event) {
  changeHelperTextDisplay(event.target, 'inline-block');
}

function handleBlur(event) {
  changeHelperTextDisplay(event.target, 'none');
}

const inputs = document.querySelectorAll('input');

inputs.forEach((input) => {
  input.addEventListener('focus', handleFocus);
  input.addEventListener('blur', handleBlur);
});