2016-09-29 101 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

一個很好的方式,實際上,我最終使用'tooltip'而不是'placeholder' –

+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

哇,這很酷。 –

+0

謝謝科達昌 – Gowtham

+0

那是可能只會讓'(至少8個字母,數字或標點符號)'小包裹像上面的圖片? –

2

你可以做這樣的事情

enter code here 

example

+0

這是一個很好的文字輸入技巧。但是如果輸入是密碼 –

+0

那也是我所關心的。 –

+0

你不能。它的設計是多行的唯一HTML表格元素是