我在表格中有一个文本框，由我网站上的表单填充。这个文本框也可以被编辑/删除，我在从用户填写的表单中将全文显示到文本框时遇到了问题。问题是文本框不会扩展以适合用户输入的文本。它会将消息一直显示到文本框的末尾，之后的任何内容都不会显示，因为文本框不会展开。
我的代码:
<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
}
最佳答案
输入字段有其局限性。因此，您可以使用 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"。
关于html - 表格文本框填满后不会展开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49604086/