无效的表单控件（type=url）在 Chrome 中隐藏时不可聚焦答案

【问题标题】：Invalid form control (type=url) is not focusable when hidden in Chrome无效的表单控件（type=url）在 Chrome 中隐藏时不可聚焦
【发布时间】：2013-05-31 12:12:59
【问题描述】：

我在 Chrome 中遇到问题，表单提交导致以下错误：

An invalid form control with name='ctl00$cphMain$ctl01$groupControl$website' is not focusable.

这是一个 <input type="url" ...> 在 Chrome 中呈现在具有 display:none 集的 <div> 内（直到选中相邻的复选框）。没有required 属性，也没有设置maxlength 属性，所以我不确定提交失败的原因。这是标记的相关部分（有问题的控件在第二个<fieldset>内）：

<label class="checkbox">
    <input id="ctl00_cphMain_ctl01_groupControl_ctl13" type="checkbox" name="ctl00$cphMain$ctl01$groupControl$ctl13" onclick="$(this).parent().siblings('div.expandableContainer').slideToggle();"/>
    Include contact...
</label>
<div class="expandableContainer form-expanded js-initial-hide " style="display: none;">
    <fieldset>
        <label>
            Name:
            <span class="req">*</span>
        </label>
        <input name="ctl00$cphMain$ctl01$groupControl$name" type="text" maxlength="100" id="ctl00_cphMain_ctl01_groupControl_name"/>
    </fieldset>
    <fieldset>
        <label>
            Website:
            <span class="req">*</span>
        </label>
        <input name="ctl00$cphMain$ctl01$groupControl$website" type="url" id="ctl00_cphMain_ctl01_groupControl_website" value="http://" onblur="if (this.value == 'http://') this.style.color = '#666';" onfocus="this.style.color = '#000';" style="color:#666;"/>
    </fieldset>
    <fieldset>
        <label>
            Email:
            <span class="req">*</span>
        </label>
        <input name="ctl00$cphMain$ctl01$groupControl$email" type="email" maxlength="100" id="ctl00_cphMain_ctl01_groupControl_email"/>
    </fieldset>
</div>

根据 W3.org (http://www.w3.org/TR/html401/interact/forms.html#successful-controls)，这应该是一个“成功”的控制。即使添加 2000 的 MaxLength（数据库字段宽度）也不起作用。周边控件没有收到错误。

你知道为什么这个表单提交失败了吗？选中该框（使周围的<div> 显示（带有display:block）可以毫无问题地提交表单。

非常感谢。

【问题讨论】：

标签： html asp.net validation google-chrome

【解决方案1】：

好吧，我发现了问题：不可见的 URL 字段 (<input type="url" ... />) 有一个非空值集（基本上是实现占位符文本的遗留 JavaScript 解决方案的一部分）。出于某种原因，这个不可见字段中的值会引起 Chrome（可能来自他们的内置验证，其他讨论类似问题的人已经提到过）。也许 Chrome 错过了祖先 <div> 中指定的缺乏可见性。

我是如何解决这个问题的：

删除了 onblur、onfocus 和 style 属性，因为它们是多余的；
将value 属性更改为新的HTML5 placeholder 属性，保持相同的属性值。

唯一的缺点是网站访问者必须在字段中手动输入“http://”而不是追加；我们的项目团队将讨论改善用户体验的策略。

【讨论】：