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);
}
我真的试图把"；您正在输入一个数字"；当有人选择输入字段时。我能做什么？请帮帮我。在这一点上我有点困惑？
使用onfocus="yourjsfunc(("在您的html代码中。例如：
<input id="a" type="text" onfocus="yourjsfunc();">
使用display:none和display:block来隐藏和显示您的文本元素。
<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方法
[data-id="helper-text"] {
display: none;
}
label:focus-within [data-id="helper-text"] {
display: inline-block;
}
JavaScript方法
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);
});