使用CSS和JS固定文本区域中的文本

Question

我正在尝试在文本区域的开头修复文本，我现在所拥有的是：

  <div>
   <textarea class="title-text" placeholder="do something..." rows="2" maxlength="80"></textarea>
   <span class="before-title">I will,</span>
  </div>

此链接中的详细信息： http : //jsbin.com/tolifa/1/watch?html,css,output

但是真正的问题是，当用户键入的文本大于textarea的大小（textarea的大小应保持不变）时，固定文本不会移到顶部，并且出现此问题：

每当更改textarea内容时，我需要一些JS将其更新为class before-title css top属性

Answer 1

没有javascript的解决方案是：

http://jsfiddle.net/vsync/qu0q8qgc/

<div class='tArea' contenteditable data-fixedtitle='fixed title: '>This is the default text</div>

CSS

.tArea{ font:20px/1.2 arial; border:1px solid #CCC; padding:1em; margin:1em; height:5em; overflow:auto;
    &::before{ content:attr(data-fixedtitle); color:red; }
    > span{ float:left; color:red; }
    > p{ margin:0; padding:0; }
}

Answer 2

HTML

<div id="holder"><textarea class="title-text" placeholder="do something I'm really good at" rows="3" maxlength="80"></textarea>
<span class="before-title">Pour Combien,</span>

    <span id="testscrol"></span></div>

CSS

.before-title, .title-text {
  font-family: monospace;
  font-size: 45px;
}

.before-title {
  position: absolute;
  top: 7px;
  left: 7px;
  color: #dddddd;
  font-size: 45px;
    z-index: 1 ; 
}
#holder {
    position: relative; 
    overflow: hidden;
}
.title-text {
  text-indent: 340px; /* change this value */
  font-size: 40px;
  line-height: 45px;
  letter-spacing: 2px;
  width: 100%;
  display: block;
  overflow: auto;
  z-index : 99999 ;   
}

的JavaScript（jQuery的）

  function h(e) {
    var height =  e.scrollTop; 
    $("#testscrol").html(e.scrollTop) ; 
    $(".before-title").css({'top' : 9 - height });

}
$('textarea').each(function () {
  h(this);
}).on('scroll' , function(){
    h(this) ; 
}); 

＃现场演示＃

〜zerzer解决的错误〜