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

Question

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

问题在于所有浏览器，但是当我在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>

Answer 1

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

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

Answer 2

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

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

Answer 3

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

。

Answer 4

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

我不得不从我的代码中对 setSelectionRange 进行注释，但在手机上不起作用：

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