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がそのような動作を引き起こすのでしょうか、何を探すべきでしょうか？

これが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;
}

返信ありがとうございます！

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 に答える