CODEWITHSUNDEEP
htmlcss
rj487
rj487

Reputation: 4634

Placeholder auto wrap inside a input field

I need to put a long placeholder text inside a input field.

However, the placeholder will be cut due to its long text.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<label for="password">
  <input id="password" name="user[password]" placeholder="Password (at least 8 letters, numbers, or punctuation marks)" size="30" type="password">
</label>

Is there any way to make it become this? enter image description here

Upvotes: 14

Views: 29435

Answers (4)

F&#233;lix Paradis
F&#233;lix Paradis

Reputation: 6021

For my use case, combining the white-space:pre-line; trick to absolute positioning worked beautifully.

(My use case being an input with padding.)

#first::placeholder {
    white-space:pre-line; 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#second::placeholder {
    white-space:pre-line; 
}

input {
  padding: 1rem 0;
  margin-bottom:2rem;
}
<label>
  with position absolute (placeholder nice and centered)
<br/>
  <input id="first" placeholder="Password (at least 8 letters, numbers, or punctuation marks)" size="30" type="password">
</label>
<br/>
<label>
  without position absolute (placeholder at the bottom (😢))
  <br/>
  <input id="second" placeholder="Password (at least 8 letters, numbers, or punctuation marks)" size="30" type="password">
</label>

Edit: this doesn't work on Safari because Safari only allows very few CSS properties on placeholders.

Upvotes: 2

Prifulnath
Prifulnath

Reputation: 567

I have tried it with division. You can try it also:

var placeholder = '<div>Password </div> <div>(at least 8 letters, numbers, or<br> punctuation marks)</div>';
$("body").click(function(e){
	if($("#input").html() === ""){
    $("#input").html("<div>Password </div> <div>(at least 8 letters, numbers, or<br> punctuation marks)</div>");
    $("#input").css("color", "gray")
  }
});
$('#input').focus(function(){
    if($(this).html() === placeholder){
        $(this).html("");
        $(this).css("color", "black")
    }
});
#input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;  
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 240px;
    height: 30px;
    color: gray;
}
#input div{  
    float: left;
    clear: none; 
    height: 100%;
    vertical-align:middle;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input" contenteditable><div>Password </div> <div>(at least 8 letters, numbers, or<br> punctuation marks)</div></div>

Upvotes: 4

Gowtham
Gowtham

Reputation: 1597

input{
  height:50px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  white-space:pre-line;  
  position:relative;
  top:-7px;
  
}
::-moz-placeholder { /* Firefox 19+ */
     white-space:pre-line;  
  position:relative;
  top:-7px;
}
:-ms-input-placeholder { /* IE 10+ */
    white-space:pre-line;  
  position:relative;
  top:-7px;
}
:-moz-placeholder { /* Firefox 18- */
     white-space:pre-line;  
  position:relative;
  top:-7px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<label for="password">
  <input id="password" name="user[password]" placeholder="Password (at least 8 letters, numbers, or punctuation marks)" size="30" type="password">
</label>

Upvotes: 20

Quy Truong
Quy Truong

Reputation: 413

I use the span for place holder like this. You can wrap it like whatever you want:

<label for="password">
  <input id="password" name="user[password]" placeholder="" type="password">
  <span class="placeholder">Password (at least 8 letters, numbers, or punctuation marks)</span>
</label>

and add a bit javascript and css:

jQuery(document).ready(function($){
    $('input').each(function(idx,el){
    $(el).width($(el).next('.placeholder').width());
    $(el).next('.placeholder').css("line-height",$(el).css("line-height"));
  });
  $('input').on("focus",function(e){
    $(this).next('.placeholder').css("visibility","hidden");
  });
  $('input').on("blur",function(e){
    if($(this).val().length == 0)
        $(this).next('.placeholder').css("visibility","visible");
  });
});

CSS:

label {
  position: relative;
}

.placeholder {
  position:absolute;
  left: 0;
  white-space: nowrap;
  padding: 2px 8px 0px;
  color: grey;
}

http://jsfiddle.net/pdXRx/906/

Upvotes: 1

Related Questions