Question

我的HTML中有一个表单，其中包含名字，姓氏和电话号码以创建帐户ID。名字，姓氏和帐户ID的输入文本框将接受键盘输入并按预期显示。但是，当我在Firefox浏览器上查看页面时，只有电话号码文本框不起作用。我可以单击一次该框，然后看到光标，但是一旦我开始键入，就不会显示任何文本，并且光标也会消失。但是，基于Javascript创建的帐户ID，并键入了电话号码的最后四位，我知道输入已被识别。它可以在其他浏览器中使用，而不能在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的{{1}}容器进行类似的分组

来自semantic ui form的示例：

input

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

1 个答案: