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

Question

i'm trying to fix a text in the beginning of text area, what I have right now is this :

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

the details in this link : http://jsbin.com/tolifa/1/watch?html,css,output

but the real issue is when the user types text bigger than the textarea size ( the size of textarea should be unchanged), the fixed text is not moved to top and this issue appears :

I need some JS to update to css top property of the class before-title when ever the textarea content is changed

Answer 1

a solution without javascript would be:

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

#Live Demo#

~error fixed by zerzer~