javascript - 一个 HTML 表单文本框在 Firefox 中不显示键盘输入

Question

我的 HTML 中有一个表单，它接受名字、姓氏和电话号码来创建帐户 ID。正如预期的那样，名字、姓氏和帐户 ID 的输入文本框接受键盘输入并显示它。但是，当我在 Firefox 浏览器上查看页面时，只有电话号码文本框不起作用。我可以单击一次框并看到光标，但是一旦我开始输入，就没有文本显示，并且光标消失了。但是，基于使用键入的电话号码的最后四位数字创建帐户 ID 的 Javascript，我知道输入已被识别。它适用于其他浏览器，但不适用于 Firefox。

        <article>
            <h2>New Account Information</h2>
            <form>
                <fieldset id="deliveryinfo">
                    <label for="fnameinputacct">First Name</label>
                    <input type="text" id="fnameinputacct" name="fname" />
                    <label for="lnameinputacct">Last Name</label>
                    <input type="text" id="lnameinputacct" name="lname" />
                    <label for="phoneinputacct">Phone Number</label>
                    <input type="text" id="phoneinputacct" name="phone" />
                    <label for="accountidbox">Account ID</label>
                    <input type="text" id="accountidbox" name="accountid" />
                </fieldset>
                <fieldset id="submitbutton">
                    <input type="submit" id="submitBtn" value="Create Account" />
                </fieldset>
            </form>
        </article>

这是CSS

fieldset {
    margin-bottom: 10px;
    position: relative;
    padding: 2.5em 1em 0.5em 1em;
    background: #e3d5ba;
}

#deliveryinfo label {
    display: block;
    float: left;
    clear: left;
    margin-top: 5px;
}

#deliveryinfo input {
    display: block;
    margin-left: 130px;
}

#fnameinputacct, #lnameinputacct, #phoneinputacct, #accountidbox {
    width: 12em;
}

#submitBtn {
    font-size: 1.25em;
}

还有一些与字段一起使用的 Javascript。此方法是在另一个函数中添加的。

            function createID() {
            var fname = document.getElementById("fnameinputacct");
            var lname = document.getElementById("lnameinputacct");
            var phone = document.getElementById("phoneinputacct");
            var account = document.getElementById("accountidbox");
            var fields = document.getElementsByTagName("input");
            var acctid;
            var fistInit;
            var lastInit;

            if (fname != "" && lname != "" && phone != "") {
                fistInit = fname.value.charAt(0).toUpperCase();
                lastInit = lname.value.charAt(0).toUpperCase();
                acctid = fistInit + lastInit + phone.value.substring(phone.value.length - 4);
                account.value = acctid;
                newAccountArray = [];
                for (var i = 0; i < fields.length - 1; i++) {
                    newAccountArray.push(fields[i].value);
                }
            }
        }

Answer 1

您可以尝试使用 <div> 来分解您的表单字段组或 <p> .

参见 https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form

一些广泛使用的 css 框架也这样做。查看语义 UI、Bootstrap 或 Material。这些与 div 进行类似的分组每个容器 label/input

示例来自 semantic ui form :

<form class="ui form">
  <div class="field">
    <label>First Name</label>
    <input type="text" name="first-name" placeholder="First Name">
  </div>
  <div class="field">
    <label>Last Name</label>
    <input type="text" name="last-name" placeholder="Last Name">
  </div>
  <div class="field">
    <div class="ui checkbox">
      <input type="checkbox" tabindex="0" class="hidden">
      <label>I agree to the Terms and Conditions</label>
    </div>
  </div>
  <button class="ui button" type="submit">Submit</button>
</form>