如何在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

对于允许某人输入多行的输入，请使用<textarea>。您还可以定义textarea可以具有的cols和行，基本上在该点创建新行

Answer 3

选项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>