<input type =“text”/>에서 여러 줄의 입력

이 텍스트 입력 양식이 있습니다.

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

여러 줄의 입력을 받으려고합니다. 너비와 높이는 상자를 더 크게 만들지 만 사용자는 원하는 텍스트를 모두 입력 할 수 있지만 한 줄만 채 웁니다.

입력을 텍스트 영역처럼 만들려면 어떻게해야합니까?

여러 줄을 처리하려면 텍스트 영역을 사용해야합니다.

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

word-break: break-word;속성 을 제공하여 텍스트 입력 여러 줄을 만들 수 있습니다. (Chrome에서만 이것을 테스트했습니다)

당신은 할 수 없습니다. 글을 쓰는 시점에서 여러 줄로 디자인 된 유일한 HTML 양식 요소는 <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>

자동 높이 가있는 텍스트 영역 이 필요한 경우 순수 자바 스크립트로 다음을 사용하십시오.

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 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
    }
});