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文本中的任何位置以将光标放在那里
不能用箭头键移动光标，它只会向左和向右移动几个字符，如果按下向上/向下箭头，它会将光标移动到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;
}

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

再次感谢大家。

PS。另外要向任何怀疑我在textarea内的代码未转义的人澄清 - 是的，但这似乎不是问题，你显然可以做到。

HTML - 当CSS打开时，无法在textarea中移动光标

1 个答案: