Fiverr样式textarea与css和JS

Question

我不想制作一个看起来像fiverr textarea的textarea来创建一个演出，文字＆＃34;我会＆＃34;固定和禁用，我可以写在它旁边。

我设法用css创建类似的东西 但是，当文本写在许多行上时，我坚持以下问题，第一个固定文本没有移到顶部，用户写的其他行

我知道javascript是解决方案，但我不确切知道如何，任何想法都可以吗？如果有任何特定角度的话，我会使用angularJS，它也受到欢迎。这是我的代码：

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

Answer 1

您可以在textarea上使用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>

Answer 2

我要找的答案就在这里： https://jsfiddle.net/ttwbxwon/66/ 使用以下javascript函数绑定到textarea的onscroll事件：

function heigthChange() {
  var e = document.getElementById("text-combien"); 
  var height =  e.scrollTop; 
  document.getElementById("before-text").style.top = (0 - height) + "px" ;
}