HTML - 当 CSS 打开时，无法在文本区域内移动光标

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被关闭时，它可以完美地工作。

但当它打开时，我：

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

我试过什么：

• 从CSS firebug中排除文本区域显示应用于它
• 尝试使用或不使用JS来检查这是否有影响
• 尝试了不同的浏览器，相同的问题重复出现
• 完全关闭CSS，然后它就工作了，但这不是一个选项

我唯一的想法是，也许文本区域从某个地方继承了一些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;
}

基本禁用的文本选择显然是从身体继承的。

再次感谢大家。

PS。也要向任何怀疑我在文本区内的代码未被屏蔽的人澄清——是的，确实如此，但这似乎不是问题，你显然可以做到。