为什么我不能在输入字段中选择和输入数据？答案

【问题标题】：Why can't I select and enter data in an input field?为什么我不能在输入字段中选择和输入数据？
【发布时间】：2015-03-23 21:29:48
【问题描述】：

我可以看到我创建的这个表单，但我无法在该字段中输入电子邮件地址。

问题存在于所有浏览器中，尽管当我在 IE 中进行测试时，出现了一个实际工作的验证图标（它是有效电子邮件的绿色检查和无效格式的红色“X” .) 我的推论是表单以某种方式接收输入，但它不可见。

我已经尝试了几个小时来解决这个问题，但我被困住了。诚然，我对 Web 开发还比较陌生，我的主要故障排除途径是逐段删除代码，然后进行测试和重新测试，看看我是否能找到问题所在。我尝试删除表格（您可以通过大提交按钮看到它们现在已经消失），删除了一些我认为无关的脚本，我似乎找不到解决方案。

在此页面上，我有我正在使用的表单：http://dev.premierpaymentsystems.com/newsletter-sign

表单本身是使用名为“Act-on”的营销自动化工具生成的。此处的代码是从“Act-on”工具中提取的。

任何帮助将不胜感激。在独立测试中运行代码时，它工作正常，所以我做的另一个假设是页面上有其他东西干扰，但我不知道从哪里开始解决这个问题。

完整的代码（在我调整之前）在这里：

<form id="form_0001" method="post" enctype="multipart/form-data" action="http://info.premierpaymentsystems.com/acton/forms/userSubmit.jsp" accept-charset="UTF-8" target="_blank">
<input type="hidden" name="ao_a" value="15000"  >
<input type="hidden" name="ao_f" value="0001"   >
<input type="hidden" name="ao_d"    value="0001:d-0001" >
<input type="hidden" name="ao_p" id="ao_p" value="0"    >
<input type="hidden" name="ao_jstzo"    id="ao_jstzo" value=""  >
<input type="hidden" name="ao_cuid" value=""    >
<input type="hidden" name="ao_srcid"    value=""    >
<input type="hidden" name="ao_bot"  id="ao_bot" value="yes" >
<input type="hidden" name="ao_camp" value=""    >
<link rel="stylesheet" type="text/css" href="http://info.premierpaymentsystems.com/acton/form/15000/0001/form.css">
<div id="ao_alignment_container" align="center">
<table class="ao_tbl_container" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="ao_tbl_cell" style="padding-left: 10px; padding-right: 10px" align="center">
<div align="left">
<div class="formField">
<div class="formFieldLabel" id="form_0001_fld_0-Label">
<label for = "form_0001_fld_0">
E-mail</label>
</div>
<input type="text" class="formFieldText formFieldMedium" id="form_0001_fld_0" name="E-mail Address" onBlur="singleCheck ('form_0001_fld_0', 'EMAIL', 'form_0001_fld_0-Label')">
</div>
<script type="text/javascript">
if (typeof(addFieldToValidate) != 'undefined') { addFieldToValidate ('form_0001_fld_0', 'EMAIL'); } </script>
</div>
</td>
</tr>
<!-- BUTTONS -->
<tr>
<td>
&nbsp;</td>
</tr>
<tr>
<td style="padding-bottom: 10px" align="center" id="form_0001_ao_submit_button">
<input id="form_0001_ao_submit_input" type="button" name="Submit" value="Submit" onClick="doSubmit(document.getElementById('form_0001'))">
</td>
</tr>
<tr class="formNegCap">
<td>
<input type="text" id="ao_form_neg_cap" name="ao_form_neg_cap" value="">
</td>
</tr>
</table>
</div>
<img src='http://info.premierpaymentsystems.com/acton/form/15000/0001:d-0001/pgend.gif' width='1' height='1'>
</form>

【问题讨论】：

它与您的 css 有关。通过删除输入元素上的样式类，文本框可以正常工作。

标签： html css forms drupal

【解决方案1】：

.formFieldText 的高度太小，无法显示您输入的内容。如果您删除或增加高度，您可以看到字母。

如果要保持字段的高度，则必须删除或减少其内部的填充。

【讨论】：

【解决方案2】：

您必须删除或放大您的 css 类的 height 属性：.formFieldText（目前为 19px）

您可以使用 Chrome 或 Firefox 对其进行分析和测试（右键单击元素并从上下文菜单中选择 Web-Developer/Inpect-Element 或类似的东西。之后您可以轻松更改 css 代码）

【讨论】：

非常感谢你们！那解决了它。多亏了你，我的腰带上又多了一项知识。

【解决方案3】：

在我的情况下（使用 React）我必须删除 value 属性。它被设置为 ''。

【讨论】：

【解决方案4】：

我的表单在我触摸的第一个输入中被冻结。

我不得不评论我的代码中的 setSelectionRange 无法在手机上运行：

//input[0].setSelectionRange(caret_pos, caret_pos);

【讨论】：