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

debugcn 发表于 Dev

zerzer

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

  <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来更新top该类的css属性before-title

阿洛波塔（Alupotha）

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