<分区>
javascript - 带有 css 和 JS 的 Fiverr 样式文本区域
我不想制作一个看起来像 fiverr textarea 的 textarea 来创建一个演出，文本“我愿意”是固定和禁用的，我可以在它旁边写。
我设法用 css 创建了类似的东西
但是我遇到了以下问题，当文本写在多行上时，第一个固定文本不会与用户编写的其他行一起移动到顶部
我知道 javascript 是解决方案，但我不知 Prop 体如何，有什么想法吗？我正在使用 angularJS 如果有任何特定于 angular 的东西它也受到欢迎。这是我的代码:
<label class="item item-input" id="questionArea" style="margin-top: -30px;">
<textarea class="text-combien" style="height:100px;padding-right:15px;" ng-model="question.text" placeholder=""> </textarea>
<div class="before-text">Pour Combien,</div>
<div class="ask-text">?</div>
</label>
最佳答案
您可以在文本区域上使用 text-indent CSS 属性，然后您只需将一个跨度定位到您缩进文本的位置。看看这个 jsFiddle .您需要根据您想要的字体调整定位/大小。
<div id="container">
<textarea placeholder="do something I'm really good at"></textarea>
<span class="textbox-prefix">I will</span>
</div>
<style type="text/css">
.textbox-prefix{
position:absolute;
top:11px;
left:10px;
font-family: monospace;
}
textarea{
text-indent: 50px;
width:300px;
height;200px;
}
</style>
关于javascript - 带有 css 和 JS 的 Fiverr 样式文本区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29243699/