Question

我有一个Web应用程序，用户可以在其中编辑他们的个人资料信息。这是一个普通的Web表单，其输入字段包含现有值：

<form action="<snipped>" method="post" accept-charset="UTF-8" id="frmEditUser">

<fieldset>

<p>
<label for="username">Username</label>
<input type="text" name="username" id="username" value="<?= $uname ?>" size="30" title="must be unique" size="30" />
<label for="username" generated="true" class="error">*<?= form_error('username'); ?></label>
</p>

</fieldset>
</form>

还有更多字段，但这个简化的标记显示我无所作为。在Safari和Chrome中（在Windows 7上）我在尝试选择这些字段中的现有值时会遇到一些非常奇怪的行为：

当我从左向右选择时，所选文本会按预期突出显示。 当我将光标放在字段的末尾并从右向左选择时，释放鼠标按钮后，选择撤消，光标再次位于字段的末尾。

在我的应用程序的所有输入字段和textareas中都会出现此问题，但仅限于Safari和Chrome。我认为这可能是一个javascript问题，但是当禁用所有javascript时问题仍然存在。禁用所有CSS会使问题消失。

所以问题出在我的CSS中。我禁用了所有与表单或表单元素有关的CSS规则，但问题仍然存在。

我希望有其他人遇到同样问题的奇怪机会？

更新：问题更加精细。似乎只有在我从右到左选择并且在此过程中悬停退出左边缘的字段时才会出现。不要像在外面点击一样退出，而是在悬停时退出，同时仍然按住鼠标按钮以便选择。

更新II：我发现了问题的根源。当从右到左选择并在此选择过程中退出表单元素而不是字段时，会发生这种情况。我在表单元素周围添加了一个红色边框。当我在左侧退出时，我所做的选择就消失了。如果我在左侧的表单元素中添加填充，则表明只要我保留在表单元素内，选择就会保留。

我想解决一个奇怪的问题：（

Answer 1

我看了你的问题，决定用chrome检查我的网站，发现同样的问题。访问我的网站www.futurekode.com并转到联系表格并输入您的姓名和电子邮件，然后尝试选择文本。

在我的情况下，它只发生在第二个输入字段（电子邮件一个）而不是textarea。

我发现将display：block添加到输入字段会将其修复为chrome而不是safari：/

非常奇怪

Safari中的奇怪问题：无法从输入字段中选择文本

1 个答案: