如何使輸入框大爲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可以有的列和行，基本上在那個時候創建​​新行