Question

我有一个textarea。当我在顶部点击它时它没有聚焦，但是当我点击它向下时它就会聚焦。

<textarea type="text" value="" id="theMessage" required></textarea>

textarea {
 width: 485px;
 height: 310px;
 position: absolute;
 top: 110px;
 border: 0;
 outline: none;
 overflow: hidden;
 resize: none;
 font-family: 'Coming Soon', cursive;
 font-weight: bold;
}

Answer 1

＆＃13;

textarea {
 width: 485px;
 height: 310px;
 position: absolute;
 top: 110px;
 border: 0;
 outline: none;
 overflow: hidden;
 resize: none;
 font-family: 'Coming Soon', cursive;
 font-weight: bold;
 border:2px solid black;
}

＆＃13;

<textarea type="text" value="" id="theMessage" required></textarea>

＆＃13;

<textarea type="text" value="" id="theMessage" required></textarea>
<style>
textarea {
 width: 485px;
 height: 310px;
 position: absolute;
 top: 110px;
 border: 0;
 outline: none;
 overflow: hidden;
 resize: none;
 font-family: 'Coming Soon', cursive;
 font-weight: bold;
 border:2px solid black;
}</style>

你可以使位置相对或设置边框到文本区域以使其可见。在上面的代码中显示border:2px solid black; 您可以设置背景颜色以使其更加明显。

background:white;

Answer 2

由于textarea位置，可能会有一些其他div与absolute重叠。

以下是演示如何发生这种情况的示例：div.overlap位于textarea上方，因为absolute位置会从正常文档流中删除texterea。

<textarea type="text" value="" id="theMessage" required></textarea>

<div class="overlap"></div>

textarea {
 width: 485px;
 height: 310px;
 position: absolute;
 top: 110px;
 border: 0;
 outline: none;
 overflow: hidden;
 resize: none;
 font-family: 'Coming Soon', cursive;
 font-weight: bold;
}

.overlap {
  height: 200px;
  background: rgba(255, 0, 0, 0.5);
  position: relative;
}

https://jsfiddle.net/h1aLf94x/4/

因此，请检查您的文档中是否有任何可以在textarea上重叠的元素，并修复它们。

Answer 3

有一个div元素与textarea元素重叠。从样式中删除位置属性，您可以看到您的textarea能够被单击。

Textarea本身不起作用

3 个答案: