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

我正在建立一个个人的小型社交网络。作为设计的一部分，所有状态都应该以默认文本开始，不应该改变，类似于"嗨，我的名字是……"，然后用户完成其余部分。有点像HTML5占位符，不会消失。实现这一目标的最佳方式是什么?

请参考此页如果它的目的，那么请找到下面的代码。

标记:

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

注意:出于某些愚蠢的原因，我假设使用jQuery(注意，您不需要使用 jQuery，但这会使它更简单)。

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

: 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>

如果你想使用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);

当然还有一个工作演示。

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

如果您的目标是用户不能更改此文本，那么您可以做以下几件事:

在文本区域外添加文本(例如在文本区域上方)
添加文本区域之外的文本，但使用css将其放置在文本区域的后面。您可以使文本区域透明，这样用户就可以看到文本。问题是用户键入的文本可能会落在你放置在背景中的文本上
把它放在textarea的背景图片中
将文本放在文本区(<textarea>Hi, my name is </textarea>)内，并使用JavaScript测试已键入的内容，并更改文本，如果它更改为您不想要的内容。你可以使用屏蔽插件来做到这一点。

最好的选择是第一个和第四个。我选第一个，因为这是目前为止最简单的

相关内容

最新更新

热门标签：