如何使输入框大为HTML中的文本区域

Question

我必须在输入框中显示新的报价。输入框太小。

<form action="https://twitter.com/intent/tweet" method="get" id=usrform> 
 
    <div id="input"> 
 
    <label for=quote>New Quote will appear</label><br> 
 
    <input name="text" id="quote" type="text" value="" multiple="multiple"> 
 
    </div> 
 
    <button id=getquotebtn type=button>Get A New Quote</button> 
 
    <button id=twitterbtn type=submit>tweet</button> 
 
</form>

Answer 1

<form action="https://twitter.com/intent/tweet" method="get" id=usrform> 
    <div id="input"> 
    <label for=quote>New Quote will appear</label><br> 
    <textarea name="text" id="quote" type="text" value="" cols="5" rows="5">your quote is here</textarea> 
    </div> 
    <button id=getquotebtn type=button>Get A New Quote</button> 
    <button id=twitterbtn type=submit>tweet</button> 
</form> 

请使用textarea的，而不是输入文本类型。这是很好的做法

Answer 2

选项1：

$("document").ready(function(){ 
 
    $("#getquotebtn").click(function(){ 
 
     setInput("hello world ") // 
 
    }) 
 
}) 
 

 
function setInput(val){ 
 
    //alert() 
 
    $("#quote").val(val) 
 
    $("#quote").css("width", (val.length * 6) +"px"); //dynamically set the width length of input element 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="https://twitter.com/intent/tweet" method="get" id=usrform> 
 
     <div id="input"> 
 
     <label for=quote>New Quote will appear</label><br> 
 
     <input name="text" id="quote" type="text" value="" multiple="multiple"> 
 
     </div> 
 
     <button id=getquotebtn type=button>Get A New Quote</button> 
 
     <button id=twitterbtn type=submit>tweet</button> 
 
    </form>

选项2：

$("document").ready(function(){ 
 
    $("#getquotebtn").click(function(){ 
 
    setInput("hello world") 
 
    }) 
 
}) 
 

 
function setInput(val){ 
 
    $ ("#quote").val(val) 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="https://twitter.com/intent/tweet" method="get" id=usrform> 
 
      <div id="input"> 
 
      <label for=quote>New Quote will appear</label><br> 
 
      <textarea name="text" id="quote" type="text" value="" multiple="multiple"> </textarea> 
 
      </div> 
 
      <button id=getquotebtn type=button>Get A New Quote</button> 
 
      <button id=twitterbtn type=submit>tweet</button> 
 
     </form>

Answer 3

对于一个输入，允许一个人键入多行，使用<textarea>。您还可以定义textarea可以有的列和行，基本上在那个时候创建​​新行