Tôi có văn bản này nhập dưới dạng:
<input type="text"
cols="40"
rows="5"
style="width:200px; height:50px;"
name="Text1"
id="Text1"
value="" />
Tôi đang cố gắng để có được nó để có nhiều dòng đầu vào. Chiều rộng và chiều cao làm cho hộp lớn hơn, nhưng người dùng có thể nhập tất cả (các) văn bản mà anh ta muốn nhưng nó chỉ lấp đầy một dòng.
Làm thế nào để tôi làm cho đầu vào giống như một textarea?
Câu trả lời:
Bạn cần sử dụng textarea để xử lý đa dòng.
<textarea name="Text1" cols="40" rows="5"></textarea>textareakhông hỗ trợ patternthuộc tính. Thật là chết tiệt.
val(). Bạn phải appendlàm điều đó. :(
Có thể tạo một dòng nhiều văn bản bằng cách cho nó word-break: break-word;thuộc tính. (Chỉ thử nghiệm điều này trong Chrome)
Bạn không thể. Tại thời điểm viết, phần tử biểu mẫu HTML duy nhất được thiết kế thành nhiều dòng là <textarea>.
Sử dụng văn bản
<textarea name="textarea" style="width:250px;height:150px;"></textarea>không chừa bất kỳ khoảng trống nào giữa các thẻ mở và đóng hoặc Khác Điều này sẽ để lại một số dòng hoặc khoảng trống.
Kiểm tra điều này:
Phần tử TEXTAREA tạo ra một điều khiển nhập văn bản nhiều dòng
Bạn nên sử dụng textareađể hỗ trợ đầu vào nhiều dòng.
<textarea rows="4" cols="50">
Here you can write some text to display in the textarea as the default text
</textarea>Nếu bạn cần textarea với chiều cao tự động, hãy sử dụng theo sau với javascript thuần túy,
function auto_height(elem) { /* javascript */
elem.style.height = "1px";
elem.style.height = (elem.scrollHeight)+"px";
}.auto_height { /* CSS */
width: 100%;
}<textarea rows="1" class="auto_height" oninput="auto_height(this)"></textarea>Đầu vào không hỗ trợ nhiều dòng. Bạn cần sử dụng một textarea để đạt được tính năng đó.
<textarea name="Text1"></textarea>Hãy nhớ rằng
<textarea>có giá trị bên trong thẻ , không phải trong thuộc tính:
<textarea>INITIAL VALUE GOES HERE</textarea>Nó không thể tự đóng như:
<textarea/>
Để biết thêm thông tin, hãy xem điều này .
Nếu bạn đang sử dụng React, thư viện document-ui.com có thể giúp bạn:
<FormControl>
<InputLabel htmlFor="textContract">{`textContract`}</InputLabel>
<Input
id="textContract"
multiline
rows="30"
type="text"
value={props.textContract}
onChange={() => {}}
/>
</FormControl>Sử dụng <div contenteditable="true">( được hỗ trợ tốt ) với việc lưu trữ vào <input type="hidden">.
HTML:
<div id="multilineinput" contenteditable="true"></div>
<input type="hidden" id="detailsfield" name="detailsfield">js (sử dụng jQuery)
$("#multilineinput").on('keyup',function(e) {
$("#detailsfield").val($(this).text()); //store content to input[type=hidden]
});
//optional - one line but wrap it
$("#multilineinput").on('keypress',function(e) {
if(e.which == 13) { //on enter
e.preventDefault(); //disallow newlines
// here comes your code to submit
}
});
<textarea \>không có hiệu lực.