如何在html文本区域的开头添加默认文本？ [英] How do I add a default text to the beginning of an html text area?

问题描述

我正在建立一个个人小社交网络。作为设计的一部分，所有状态都应以不应更改的默认文本开头，类似于我的名字是......，然后用户完成剩下的工作。有点像HTML5占位符，不会消失。实现这一目标的最佳方法是什么？

Im building a personal little social network. As part of the design, all statuses should begin with a default text that shouldn't change, similar to "Hi, my name is…" and then the user finishes the rest. Kind of like an HTML5 placeholder that doesn't go away. What would be the best way to accomplish this?

推荐答案

注意：出于某些愚蠢的原因，我假设jQuery（注意你做的不需要 jQuery这个，但让它更容易一点。）

Note: For some dumb reason, I assumed jQuery (note that you do not need jQuery for this, but makes it a little easier).

这是一个解决方案使用的组合text-indent 和绝对定位< span> （对于前缀部分）。

Here is one solution uses a combination of text-indent and an absolutely positioned <span> (for the prefix part).

演示： http://jsfiddle.net/4YzZy/

$('textarea.withprefix').each(function() {
  var prefix = $('<span/>')
              .text($(this).data('prefix'))
              .addClass('prefix')
              .appendTo('body')
              .css({
                  left: $(this).position().left + 'px',
                  top: $(this).position().top + 'px',
              });
  $(this).css({textIndent: prefix.outerWidth() + 'px'});
});

textarea, span.prefix {
    font-family: arial; /* change these as needed, but ensure that the textarea and the span use the same font */
    font-size: 1em;
    font-weight: normal;
    padding: 2px;
    border-width: 1px;
}
span.prefix {
    position:absolute;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="withprefix" data-prefix="Hi There, "></textarea>

这篇关于如何在html文本区域的开头添加默认文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！