autosize
autosize copied to clipboard
jackmoore
Firefox issue with placeholder
Hy Jackmoore Try add long placeholder in your example:
<html>
<head>
<meta charset='utf-8'/>
<title>Simple Autosize for textareas</title>
<style>
textarea {
padding: 10px;
vertical-align: top;
width: 200px;
}
textarea:focus {
outline-style: solid;
outline-width: 2px;
}
</style>
</head>
<body>
<h3>max-height 300px</h3>
<textarea placeholder="Try typing something... Try typing something... Try typing something... Try typing something... Try typing something... Try typing something... Try typing something...Try typing something... Try typing something... Try typing something... Try typing something... Try typing something... Try typing something... Try typing something..."
style='max-height: 300px'>The coconut palm (also, cocoanut), Cocos nucifera, is a member of the family Arecaceae (palm family). It is the only accepted species in the genus Cocos.[2] The term coconut can refer to the entire coconut palm, the seed, or the fruit, which, botanically, is a drupe, not a nut. The spelling cocoanut is an archaic form of the word.[3] The term is derived from 16th-century Portuguese and Spanish coco, meaning "head" or "skull",[4] from the three small holes on the coconut shell that resemble human facial features.</textarea>
<h3>no max-height</h3>
<textarea placeholder="Try typing something... Try typing something... Try typing something... Try typing something... Try typing something... Try typing something... Try typing something...Try typing something... Try typing something... Try typing something... Try typing something... Try typing something... Try typing something... Try typing something...">
The coconut palm (also, cocoanut), Cocos nucifera, is a member of the family Arecaceae (palm family). It is the only accepted species in the genus Cocos.[2] The term coconut can refer to the entire coconut palm, the seed, or the fruit, which, botanically, is a drupe, not a nut. The spelling cocoanut is an archaic form of the word.[3] The term is derived from 16th-century Portuguese and Spanish coco, meaning "head" or "skull",[4] from the three small holes on the coconut shell that resemble human facial features.</textarea>
</body>
<script src='../dist/autosize.js'></script>
<script>
autosize(document.querySelectorAll('textarea'));
</script>
</html>
Then delete the text and the placeholder will be not show all in Firefox. In Chrome and in Edge it works fine.
Firefox:
Chrome:
Just checked and Firefox still behaves in the way described above. However, I imagine that placeholder text factoring into scrollable height is not specced behavior and different browsers took different approaches as to how to handle it. Firefox seems to have deemed placeholder text as something that doesn't take up space (doesn't contribute to scrolling). I don't think it is in Autosize's scope or realm of responsibility to change that native behavior.
