主页 / 问题 / 1573784
Accepted
FindMeTomorrow
Asked:2024-03-29 16:06:01 +0000 UTC2024-03-29 16:06:01 +0000 UTC

使用 JavaScript 更改值后激活标准 <form> 工具提示

  • 772

工具提示有问题<form>。使用 JS 更改值后，绑定的工具提示将minlength停止出现。同时，即使<input>该属性被添加到标签中，它也会停止出现value。

代码如下：

let input = document.getElementById("tel-number");
input.value = "8";
<form>
  <input type="tel" id="tel-number" name="tel-number" minlength="11" required>
  <input type="submit">
</form>

如果删除带有赋值的行，提示将开始工作：

工具提示

我注意到我需要使用 JS 并在其帮助下更改值。

javascript

3 个回答

  1. 问题是，当使用 JavaScript 更改输入值时，绑定到 minlength 属性的工具提示将不会出现。发生这种情况是因为浏览器看不到输入值的变化，因此不显示工具提示。

    设置输入值后可以显式引发“输入”事件。这将导致浏览器更新输入的视觉状态并且将出现工具提示。

    let input = document.getElementById("tel-number");
input.value = "8";

input.dispatchEvent(new Event('input'));
    • 1

  2. 但这不是一个选项，如果我正确理解数字 8 是国家/地区代码

    let input = document.getElementById("tel-number");
let code = document.querySelector("span");
let btn = document.querySelector("input[type='submit']");
code.textContent = "8";
    label {
  position: relative;
}
span {
  position: absolute;
  top: 1px;
  left: 5px;
  color: green;
}
input[type="tel"] {
  padding-left: 15px;
}
    <form>
  <label class="input-wrapper">
    <input type="tel" id="tel-number" name="tel-number" minlength="11" required>
    <span></span>
  </label>
  <input type="submit">
</form>

    • 1
  3. Best Answer

    validity一个属性和一组属性负责激活浏览器提示（其中一个 -如果字段中的字符数小于 中指定的值tooShort，则获取该值）。所有属性都是，这意味着您无法使用 JS 更改它们的值。但是，它们仅考虑用户所做的更改。如果您使用脚本更改该值，则所有属性都将采用该值。trueinputminlengthreadonlyfalse

    在我使用的项目中EventListener，这就是为什么dispatchEvent答案之一中建议的方法在我的情况下不起作用（无限递归开始）。所以我使用了方法setCustomValidity，它允许您使用给定的消息设置自己的验证：

    function inputHandler() {
  this.setCustomValidity("");
  if (this.validationMessage) {
      this.setCustomValidity(this.validationMessage);
  };
  
  if(this.value.charAt(0) != "8") {
      this.value = "8" + this.value;
  }
}

function loadHandler() {
    let input = document.getElementById("tel-number");

    input.setCustomValidity(input.validationMessage);
    input.value = "8";
    input.addEventListener("input", inputHandler);
}

window.addEventListener("DOMContentLoaded", loadHandler);
    <form>
  <input type="tel" id="tel-number" name="tel-number" minlength="11" required>
  <input type="submit">
</form>

    • 0

相关问题