2016-09-29 47 views
8

Tôi cần đặt văn bản dài placeholder bên trong trường nhập.Phần giữ chỗ tự động quấn bên trong trường nhập

Tuy nhiên, placeholder sẽ bị cắt do văn bản dài.

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

Có cách nào để làm cho nó trở thành điều này? enter image description here

+1

Tôi thực sự muốn nói thêm điều này như một gợi ý ở trên hoặc bên dưới trường đầu vào, thay vì cố gắng ép nó tất cả trong khi giữ chỗ văn bản –

+1

Đó là một cách tốt, thực sự tôi cuối cùng cũng sử dụng 'tooltip' thay vì' placeholder' –

+0

Âm thanh như một giải pháp tốt cho tôi –

Trả lời

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, điều đó thật tuyệt. –

+0

Cảm ơn bạn Coda Chang – Gowtham

+0

Có thể chỉ thực hiện '(ít nhất 8 chữ cái, số, hoặc dấu câu)' nhỏ và quấn như hình trên không? –

2

Bạn có thể làm một cái gì đó như thế này

enter code here 

example

+0

đây là một mẹo hay để nhập văn bản. nhưng nếu đầu vào là mật khẩu –

+0

Đó cũng là điều tôi quan tâm. –

+0

Bạn không thể. Phần tử biểu mẫu HTML duy nhất được thiết kế để có nhiều dòng là