为什么我不能 select 并在输入字段中输入数据？

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

您必须删除或放大 css class 的 height 属性：.formFieldText (目前是 19px)

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

Answer 2

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

如果你想保持字段的高度，你必须删除或减少它里面的填充。

Answer 3

在我的例子中（使用 React）我必须删除 value 属性。它被设置为 ''。

Answer 4

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

我不得不评论我的代码中的 setSelectionRange，它在移动设备上不起作用 phone：

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

为什么我不能 select 并在输入字段中输入数据？

Why can't I select and enter data in an input field?

html

css

forms

drupal