带有CSS和JS的Fiverr样式文本区域[重复]

Question

这个问题已经在这里有了答案：

• 使用css和js在文本区域中修复文本 2个答案

我不想制作一个看起来像fiverr textarea的文本区域来创建演出，文本“ I wil”是固定和禁用的，我可以在其旁边书写。

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

我知道javascript是解决方案，但我不知道具体如何，请问有什么想法吗？ 我正在使用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> 

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