Textarea本身不起作用

问题描述：

我有一个textarea。当我在顶部点击它时，它并没有关注，但是当我点击更低时它确实如此。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; 
}

绝对位置改变位置：相对位置。您指向的是绝对元素（在该区域中您无法将其聚焦），其上还有其他元素。检查是否为真，当你设置相对位置时，textarea会稍微低一点，它会聚焦在所有textarea零件上。然后检查哪些元素位于textarea的不可循环部分（导致您的问题） – JoelBonetR

答

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; 
 
}

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

<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>

可以使相对位置或设置边框的文本区域，使它上面visible.In代码显示设置border:2px solid black; 你可以设置和背景颜色，使其更加明显。

background:white;

答

它可以是一些其他分区重叠你textarea因为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的任何元素，并解决这些问题。

答

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

Textarea本身不起作用

相关推荐