javascript - 输入标签的大小不变

Question

下面这段代码就像一个聊天程序。页面底部有文本输入。但是当我改变大小时它不会改变。我也使用 style="width: XXpx"但同样没有改变。

     <script>
          function updatePageMsg() {

     var msg = document.getElementById("Text").value;
     var divElement = document.createElement("div");
     divElement.setAttribute("style", "background-size:cover; padding: 5px 5px 5px 5px");
     var pElement = document.createElement("p");
     pElement.innerHTML = msg;
     divElement.appendChild(pElement);
     rightDiv = document.getElementById("rightdiv");
     rightDiv.appendChild(divElement);
     document.getElementById("Text").value = null;
 }
 $(document).ready(function () {
     $('#Text').keypress(function (e) {
         if (e.keyCode == 13) {
             $('#SendBtn').click();
             return false;
         }
     });
 });
  </script>

 <div style="margin-top: 50px; background-size: cover; background-attachment: fixed; position: absolute; top: 0; left: 0; right: 0; bottom: 0">

  <div style="width: 30%; left: 0; height: 100%; background-color: yellow; float: left; overflow: scroll"></div>
  <div id="rightdiv" style="width: 70%; right: 0; height: 100%; background-color: red; float: left; overflow: scroll"></div>
   </div>

    <div style="position: fixed; bottom: 3px; width: 100%; background-size: cover; left: 0; text-align: center">
   <div>
   <input id="Text" type="search" value="Enter your Message here" style="font-size: 20px" size="100" />

   <input onclick="updatePageMsg(); return false;" id="SendBtn" type="button" value="Send" style="font-size: 20px; bottom: 6px" />

   </div>
   </div>

Answer 1

   <input id="Text" type="search" value="Enter your Message here" style="font-size: 20px" size="100" />

要修改 input 标签的宽度，您必须在 style 中设置 width 属性。

   <input id="Text" type="search" placeholder="Enter your Message here" value="" style="font-size: 20px; width : 200px;" />

否则将大小减小到更小的值。因为大小是 100，所以看起来很大。

   <input id="Text" type="search" value="Enter your Message here" style="font-size: 20px" size="40" />

我又做了一个更正。消息“在此处输入您的消息”必须是占位符而不是值。如果将其设置为值，则用户需要在输入某些数据之前手动删除文本。