2

我有一个超级简单的 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 会导致这种行为，要寻找什么？

这是萤火虫看到的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;
}

感谢您的回复！

4

1 回答 1

5

感谢大家！你实际上通过设置这个小提琴帮助了我，我开始在那里粘贴部分 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。还要向任何怀疑我在 textarea 中的代码未转义的人澄清 - 是的，但这似乎不是问题，你显然可以这样做。

于 2012-09-15T13:14:31.813 回答