HTML - 启用 CSS 时无法在 textarea 内移动光标

Question

我有一个超级简单的 HTML 表单：

<form name="editor" action="#" method="POST">
    <textarea name="contents" cols="100" rows="50"><?php echo $text; ?></textarea>
    <br>
    <input type="submit" name="submit" value="Submit" />
</form>

里面回显的文本是 HTML 代码。

现在，当 CSS 关闭时，它可以完美运行。

但是当它打开时，我：

• 无法单击 textarea 文本内的任何位置将光标放在那里
• 不能用箭头键移动光标，它只会左右移动几个字符，如果按下向上/向下箭头，它会将光标移动到文本区域的最顶部/最底部。

我试过什么：

• 从 CSS firebug 中排除 textarea 显示应用到它
• 尝试使用或不使用 JS 来检查这是否有所不同
• 尝试了不同的浏览器，同样的问题重复出现
• 完全关闭 CSS 然后它可以工作，但这不是一个选项

我唯一的想法是 textarea 可能从某个地方继承了一些 CSS，但是什么样的 CSS 会导致这种行为，要寻找什么？

这是firebug看到的CSS：

textarea {
    overflow: auto;
    resize: vertical;
    vertical-align: top;
}
button, input, select, textarea {
    font-size: 100%;
    margin: 0;
}
html, button, input, select, textarea {
    color: #222222;
    font-family: sans-serif;
}

感谢您的回复！

Answer 1

谢谢大家！你实际上通过设置这个小提琴帮助了我，我开始在那里粘贴部分 CSS，如果有人遇到同样的问题，这就是导致问题的原因：

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

基本上禁用的文本选择显然是从 body 继承的。

再次感谢大家。

附注。还要向怀疑我在 textarea 中的代码未转义的任何人澄清 - 是的，但这似乎不是问题，您显然可以做到这一点。