0

Custom placeholders can be constructed along with text areas in Javascript like this:

var custom_placeholder = "hello";

html = '<textarea class="form-control">' + custom_placeholder + '</textarea>';

However, I cannot figure out how to do this for input tags. Below does not work. The custom placeholder appears outside the input box. So how can this be done?

html += '<input type="text"/>' + custom_placeholder;

The following syntax is not allowed as well.

html += '<input type="text">' + custom_placeholder + '</input>';
Improve this question
5
  • 1
    use .attr() to set placeholder Commented May 7, 2017 at 22:30
  • @guradio is there no way to do it within the construction of the element? Commented May 7, 2017 at 22:32
  • 1
    somthing like '<input type="text" "placeholder"="'+custom_placeholder+'">' just concat it properly Commented May 7, 2017 at 22:33
  • @KevinB is this really a custom placeholder as you call it? To me "hello" is the innerText of the <textarea> element. A placeholder is an attribute of an html element such as <textarea placeholder="hello">inner text</textarea> Commented May 7, 2017 at 22:34
  • @KevinB if you use @guradio's suggestion, you should sanitize your custom_placeholder to make sure it doesn't contain, or escapes, any quote characters. Or you could use .attr('placeholder', ...) as suggested earlier, which takes care of it for you. Commented May 7, 2017 at 22:34

3 Answers 3

Reset to default
1

Vanilla JS

var txt = 'Hello',
    input = document.createElement('input');
    
input.setAttribute('type', 'text');
input.setAttribute('placeholder', txt);

document.body.appendChild(input);

jQuery

var txt = 'Hello';

$('body').append('<input type="text">');
$('input').attr('placeholder', txt);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

OP wants to set the placeholder during construction of the element. Your solution is applying the attribute from an existing element.
OK. I modified my answer. The "input" element is now built dynamically. :)
1

All you need is to concatenate the placeholderattribute within your String, like this:

html += '<input type="text" placeholder="' + custom_placeholder + '"/>';

Demo:

This is a working snippet:

var html = "";
var custom_placeholder = "A Text input";

html += '<input type="text" placeholder="' + custom_placeholder + '"/>';

document.body.innerHTML = html;

Note:

  • You better create the elements dynamically and append their attributes using JavaScript.
  • You don't need </input> for inputs in HTML, just add a / before closing your input tag.
  • Also make sure the custom_placeholder variable doesn't contain special characters such as " or '.
Improve this answer

1 Comment

You might want to mention the need to sanitize the custom_placeholder so that it doesn't contain, or escapes, any quote characters, or generally anything else that can't be used directly in HTML. Using JQuery's .attr() or the native .setAttribute() would already take care of this for you.
-1

Just use html input's placeholder attribute to set placeholder text:

let html,customPlaceholder;
html += '<input type="text" placeholder="' + customPlaceholder + '" />'

Or, if what you are looking for is actually a preset value (that the user will have to delete to enter their own input), use html's value attribute:

let html,customPlaceholder;
html += '<input type="text" value="' + customPlaceholder + '" />'

Improve this answer

5 Comments

this is exactly what i'm looking for
@KevinB this answer is similar to mine, is posted after 7 minutes, doesn't have any explanation and provide wrong Demos. do you really see it as the best anwser? I doubt it.
@chskd I believe this person was perhaps looking for a preset value instead of a placeholder. But yes, your answer was proper for what they actually asked for. Also, how have I provided wrong demos?
@chsdk I was looking for preset value, and confused it with placeholder, this was the only answer that talked about both. I will upvote your answer though
@Slam the snippets don't run (html not defined error), just define html and it's good to go

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.