javascript - How do I add a default text to the beginning of an html text area? - Stack Overflow

admin管理员组

文章数量:1277317

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 acplish this?

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 acplish this?

• javascript
• html
• textarea
• placeholder

Share Improve this question Follow asked Jul 19, 2014 at 23:48 VoltronVoltron 44177 silver badges1919 bronze badges 5

• 1 why not doing it this way? <label>Hi, my name is…<label><input/> – Thomas Junk Commented Jul 20, 2014 at 0:01
• 1 sounds pointless...just add it to the html where applicable – charlietfl Commented Jul 20, 2014 at 0:04
• If it doesn't change, and must always be there, why are you adding it to the user-input? JavaScript is vulnerable to manipulation, is inherently insecure and accessible to any user. Add this at the presentation layer, where it can't be (easily) changed by the users and where you can easily change it (should you ever wish to), without having to go through the whole of your database to remove/modify strings. – David Thomas Commented Jul 20, 2014 at 0:35
• What do you mean by presentation layer? – Voltron Commented Jul 20, 2014 at 0:41
• @Voltron - That means adding it to front-end for display purpose only in a way that the static prefix is not part of the textarea's value when submitted - requiring you to later remove/replace on the server side. i.e. Like in the answer I posted. – techfoobar Commented Jul 20, 2014 at 1:01

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Please refer this fiddle If it serves the purpose, then please find the code below.

Markup:

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

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

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

Demo: http://jsfiddle/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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="withprefix" data-prefix="Hi There, "></textarea>

If you want to use javascript to perform your task, you can set up some event listeners and then when the user makes a change, check to see if that change affected the text you want changed. Sarbbottam's new code does this, but it will replace any text you have already typed if you modify the original text. I have fixed this by saving the previous value of the 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);

And of course a working demo.

Another option that may work that is not mentioned in the other answers is to set up a keydown/keypress event listener and get the caret position in the textarea using javascript. If it is less than the length of your default text, you just call event.preventDefault(). The main disadvantage to this is that it may not be possible to make this pletely cross-browser patible.

If the goal is that the user cannot change this text then you can do a couple of things:

1. add the text outside of the textarea (above it for instance)
2. Add the text outside of the textarea but place it behind the textarea using css. You can make the textarea transparent so the user can see the text. The problem there would be that the text the user types can fall over the text you placed in the background
3. Put it in a background image of the textarea
4. Place the text inside the textarea (<textarea>Hi, my name is </textarea>) and use JavaScript to test for what has been typed and change the text if it changes into something that you do not want. There are masking plugins that you can use to do this.

The best options would be the first option and the forth. I'd go the first as it is by far the easiest

本文标签： javascriptHow do I add a default text to the beginning of an html text areaStack Overflow