Question

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

Answer 1

请参阅此fiddle 如果它符合目的，请找到下面的代码。

标记：

<textarea id='status'>
Hi, my name is...
</textarea>

JavaScript的：

document.querySelector('#status').addEventListener('input', function(e){
    var defaultText = 'Hi, my name is...',
        defaultTextLength = defaultText.length;
    if(this.selectionStart === this.selectionEnd && this.selectionStart defaultTextLength {
        this.value = defaultText;
    }
});

Answer 2

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

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

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

＆＃13;

$('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'});
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果要使用javascript执行任务，可以设置一些事件侦听器，然后在用户进行更改时，检查该更改是否会影响您要更改的文本。 Sarbbottam的新代码执行此操作，但如果您修改原始文本，它将替换您已输入的任何文本。我通过保存textarea的先前值来解决这个问题。

HTML：

<textarea id="text">Hello, my name is </textarea>

使用Javascript：

var defaultText = "Hello, my name is ";
var valueOnKeyDown = new Array();
document.getElementById("text").addEventListener("keydown", function() {
    valueOnKeyDown.push(this.value);
}, false);
document.getElementById("text").addEventListener("keyup", function(e) {
    if(valueOnKeyDown[0].substring(0, defaultText.length) != this.value.substring(0, defaultText.length)) {
        this.value = valueOnKeyDown[0];
    }
    valueOnKeyDown = new Array();
}, false);

当然还有工作demo。

另一个可能有效的选项是在其他答案中没有提到的是设置keydown / keypress事件监听器并使用javascript在textarea中获取插入位置。如果它小于默认文本的长度，则只需调用event.preventDefault（）。这样做的主要缺点是可能无法使这种完全跨浏览器兼容。

如何在html文本区域的开头添加默认文本？

3 个答案: