Question

我的表格中有一个文本框，由我网站上的表单填充。此文本框也可以编辑/删除，并且我在从用户填写的表单中将全文显示在文本框上时出现问题。问题是文本框不会扩展以适合用户输入的文本。它将一直显示到文本框末尾的消息，之后的任何内容都不会显示，因为文本框不会展开。

我的代码：

<table>
  <tr>
    <th>Title</th>
    <th>Description</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <form action=findGroup.php method=post>
    <tr>
      <td><input type=text name=name value="John Doe" /> </td>
      <td><input type=text name=description value="Column width does not automatically adjust itself to fit content" /></td>
      <td><input type=hidden name=hidden value="" /></td>
      <td><input type=submit name=update value="update" /></td>
      <td><input type=submit name=delete value="delete" /> </td>
    </tr>
  </form>
</table>

CSS：

table {
  width: 100%;
  font: 17px/1.5 Arial, Helvetica, sans-serif;
  text-align: centre;
}

input {
  width: 100%;
  font: 17px/1.5 Arial, Helvetica, sans-serif;
  text-align: centre;
}

th {
  text-align: centre;
  background-color: #4D5960;
  color: white;
}

tr {
  background-color: #f2f2f2
}

Answer 1

输入字段有它的限制。因此，您可以使用contenteditable div来模拟输入字段，并将此div中的内容复制到隐藏的输入中：

<?php
    if (!EMPTY($_POST)) {
        var_dump($_POST);
    }
?>
<!DOCTYPE html>
<html>
<style>
table {
  width: 100%;
  font: 17px/1.5 Arial, Helvetica, sans-serif;
  text-align: centre;
}

input {
  width: 100%;
  font: 17px/1.5 Arial, Helvetica, sans-serif;
  text-align: centre;
}

.input {
  margin: 8px 0;
  background-color: #fff;
  border: 1px solid grey;
}

th {
  text-align: centre;
  background-color: #4D5960;
  color: white;
}

tr {
  background-color: #f2f2f2
}

td {
  vertical-align: top;
}
</style>
<body>
    <table>
        <tr>
            <th>Title</th>
            <th>Description</th>
            <th></th>
            <th></th>
        </tr>
        <form action="" method="POST">
            <tr>
                <td>
                    <!-- hide your input field with type hidden -->
                    <input type="hidden" name="name" value="Fetch you php value here" />
                    <!-- create div contenteditable with id same as the input name -->
                    <div class="input" contenteditable id="name">Fetch you php value here again
                    </div>
                </td>
                <td>
                    <!-- same as example above -->
                    <input type="hidden" name="description" value="Column width does not automatically adjust itself to fit content"/>
                    <div class="input" contenteditable id="description">Column width does not automatically adjust itself to fit content
                    </div>
                    <input type="hidden" name="hidden" value="some value" />
                </td>
                <td><input type="submit" name="update" value="update" /></td>
                <td><input type="submit" name="delete" value="delete" /> </td>
            </tr>
        </form>
    </table>
</body>
</html>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>
$('form').on('submit', function(e){

  // stop the form from being submitted
    e.preventDefault(e);
    var form = $(this);
    // find div with class name input and get their ids and text content
    $('.input').each(function(){
    // get the id from div
    var name = $(this).attr('id');
        // remove linebreak and trim excessive spaces
    var value = $(this).text().replace('/\n/g', " ").replace('/\s+/g', " ");
        // insert value to respective input name
    $('input[name="' + name + '"]').val(value);
  });
    // submit the form
    $(form)[0].submit();
});
</script>

注意：以上只是一个示例，会将数据发布到同一个php文件中，您必须在测试后将其更改为：action =“ findGroup.php ”。

DEMO：https://jsfiddle.net/michaelyuen/owv0eb7u/

一旦盒子填满，表格文本框不会扩展

1 个答案: