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

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

#1楼 票数:3

没有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; }
}

#2楼 票数:0 已采纳

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解决的错误〜

  ask by zerzer translate from so

未解决问题?本站智能推荐:

1回复

计算文本区域中的文本大小

我只是想实现安全上传功能。 我有一个文本区域,用户可以在其中粘贴内容,而不是要求用户选择要上传的文件。 我将用JS解析它。 我想限制大小而不是字符数。 如果它是字符的数量,那么我可以轻松地在JS中实现它 疑问 1)根据大小限制数据是否安全? 2)我是JS新手。 在
3回复

突出显示文本区域中的输入

我正在尝试在我的文本区域中实现突出显示效果,基本上是在用户键入句子时,添加了背景色,类似于此效果: http : //jsbin.com/josatozeyi/1/edit (我知道这是调整textarea的大小,但是还有其他方法吗?) 有什么建议么? 其他信息这就是我的意思: h
1回复

文本区域中的列选择

有谁知道如何在 textarea 中启用列选择。 我完全不知道经过几个小时的谷歌搜索。 对 javascript、html 和 css 非常陌生。 我想这样做,这样您就可以突出显示下面的c而不是a或b并执行复制和粘贴等功能,与列选择在记事本++中的工作方式完全相同,但替换了文本选择正常完成,而不必
2回复

在文本区域中设置为只读

我需要一个巨大的领域,在这里我既可以让客户端编写文本,也可以在其中包含html元素。 想象一下控制台,如果愿意的话-第一行(me @ linuxbox:〜$)或类似的东西,是客户端无法操纵的元素,在此元素之后,客户端可以键入他们想要的任何内容。 https://jsfiddle.ne
3回复

文本区域中的空间消失了吗?

看一下这个例子: http : //jsfiddle.net/DerekL/a7bUx/ 我创建了2 textarea使用不同的CSS设置• .val 。 然后,我将2个textarea设置为相同的值,两个都在前面,每个空格有4个空格。 但是,具有CSS设置的代码似乎已“删除”了这些空
4回复

如何禁用 CSS 文本区域

下面是我正在处理的程序中的文本。 我正在尝试禁用此文本区域并将其设为只读。 我没有使用 CSS 的经验,所以我不确定这是否可行?
2回复

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

这个问题已经在这里有了答案: 使用css和js在文本区域中修复文本 2个答案 我不想制作一个看起来像fiverr textarea的文本区域来创建演出,文本“ I wil”是固定和禁用的,我可以在其旁边书写。 我设法用css创建类似的东西 但是当文本写在许
3回复

文本区域-用户在文本区域中编辑内容时,文本颜色会更改

当用户编辑文本或添加一些新文本时,我在文本区域中有一些值。...这些文本本身应该使用不同的颜色..我不确定如何实现此目标。 当我使用此Javascript将用户编辑或输入的文本更改为大写时。 这会将所有文本转换为大写...任何人都可以帮帮我..