2016-09-29 9 views
8

入力フィールドに長いplaceholderテキストを配置する必要があります。入力フィールド内のプレースホルダ自動ラップ

ただし、長いテキストのためにplaceholderが削除されます。

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

それはこのになるようにする方法はありますか? enter image description here

+1

が、私は本当にむしろ、プレースホルダーテキスト –

+1

その良い方法として、それをすべてで絞るしようとするよりも、入力フィールドの上または下にヒントとしてこれを追加することになり、実際に私は最終的に 'placeholder'の代わりに' tooltip'を使用します –

+0

私には良い解決策のように聞こえます –

答えて

7

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>

+0

wowのような入力フィールドの幅に設定されます。 –

+0

ありがとうCoda Chang – Gowtham

+0

'(少なくとも8文字、数字、または句読点)'を小さくして、上の写真のように折り返すことは可能ですか? –

2

あなたは、私はこのようなプレースホルダ用のスパンを使用して、この

enter code here 

example

+0

これはテキスト入力のための素敵なトリックです。パスワードが –

+0

の場合はどうすればいいのでしょうか。 –

+0

できません。複数行になるように設計された唯一のHTMLフォーム要素は、