อินพุตหลายบรรทัดใน <input type =“ text” />

ฉันมีข้อความนี้ในรูปแบบ:

<input type="text"
       cols="40" 
       rows="5" 
       style="width:200px; height:50px;" 
       name="Text1" 
       id="Text1" 
       value="" />

ฉันพยายามทำให้อินพุทหลายบรรทัด ความกว้างและความสูงทำให้กล่องใหญ่ขึ้น แต่ผู้ใช้สามารถป้อนข้อความทั้งหมดที่ต้องการได้ แต่จะเติมเพียงบรรทัดเดียวเท่านั้น

ฉันจะทำให้อินพุตเหมือน textarea มากขึ้นได้อย่างไร

คุณต้องใช้ textarea เพื่อรับการจัดการแบบหลายบรรทัด

<textarea name="Text1" cols="40" rows="5"></textarea>

มันเป็นไปได้ที่จะทำให้การป้อนข้อความแบบหลายบรรทัดโดยให้มันเป็นword-break: break-word;คุณลักษณะ (ทดสอบเฉพาะใน Chrome เท่านั้น)

คุณทำไม่ได้ ในช่วงเวลาของการเขียนองค์ประกอบเพียงรูปแบบ HTML <textarea>ที่ออกแบบมาเพื่อเป็นแบบหลายบรรทัด

ใช้ textarea

<textarea name="textarea" style="width:250px;height:150px;"></textarea>

อย่าเว้นที่ว่างระหว่างแท็กเปิดและแท็กปิดหรืออื่น ๆ นี่จะทำให้บรรทัดว่างหรือช่องว่างว่างเปล่า

ตรวจสอบสิ่งนี้:

• http://www.w3.org/TR/html401/interact/forms.html#h-17.7

องค์ประกอบ TEXTAREA สร้างการควบคุมการป้อนข้อความแบบหลายบรรทัด

คุณควรใช้textareaเพื่อรองรับอินพุตหลายบรรทัด

<textarea rows="4" cols="50">
Here you can write some text to display in the textarea as the default text
</textarea>

หากคุณต้องการtextarea ที่มีความสูงอัตโนมัติให้ใช้ดังนี้ด้วยจาวาสคริปต์ที่บริสุทธิ์

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>

อินพุตไม่รองรับหลายบรรทัด คุณต้องใช้ textareaเพื่อให้ได้คุณสมบัตินั้น

<textarea name="Text1"></textarea>

จำไว้ว่า<textarea>มีค่าอยู่ภายในแท็กไม่ใช่ในแอตทริบิวต์:

<textarea>INITIAL VALUE GOES HERE</textarea>

มันไม่สามารถปิดตัวเองเป็น: <textarea/>

สำหรับข้อมูลเพิ่มเติมโปรดดูไปนี้

หากคุณใช้ React ห้องสมุด material-ui.com สามารถช่วยคุณได้:

  <FormControl>
    <InputLabel htmlFor="textContract">{`textContract`}</InputLabel>
    <Input
      id="textContract"
      multiline
      rows="30"
      type="text"
      value={props.textContract}
      onChange={() => {}}
    />
  </FormControl>

https://material-ui.com/components/text-fields/#multiline

การใช้งาน<div contenteditable="true">( การสนับสนุนอย่างดี ) <input type="hidden">ที่มีการจัดเก็บไป

HTML:

<div id="multilineinput" contenteditable="true"></div>
<input type="hidden" id="detailsfield" name="detailsfield">

js (โดยใช้ 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
    }
});