问题
运行SpringMVC+Mybatis项目,thymeleaf输入框中文字显示在输入框外
详细问题
相关代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>服装信息更新</title>
</head>
<body>
<form th:action="@{/clothing_info/updated}" method="post">
<input type="hidden" name="_method" value="put">
<table style="margin: auto">
<tr>
<td>商品 ID:</td>
<td><input type="text" name="id" th:value="${clothingInfo.getId()}" readonly></td>
</tr>
<tr>
<td>名称:</td>
<td><input type="text" name="name" th:value="${clothingInfo.getName()}" required></td>
</tr>
<tr>
<td>分类:</td>
<td><input type="text" name="classification" th:value="${clothingInfo.getClassification()}" required></td>
</tr>
<tr>
<td>是否上架:</td>
<td><input type="text" name="listing" th:value="${clothingInfo.getListing()}" required></td>
</tr>
<tr>
<td>价格:</td>
<td><input type="value" name="price" th:text="${clothingInfo.getPrice()}" required></td>
</tr>
<tr>
<td>优惠内容:</td>
<td><input type="text" name="offerContent" th:value="${clothingInfo.getOfferContent()}" required></td>
</tr>
<tr>
<td>是否包邮:</td>
<td><input type="text" name="freeShipping" th:value="${clothingInfo.getFreeShipping()}" required></td>
</tr>
<tr>
<td>参数内容:</td>
<td><input type="text" name="parameter" th:value="${clothingInfo.getParameter()}" required></td>
</tr>
<tr>
<td>颜色:</td>
<td><input type="text" name="colour" th:text="${clothingInfo.getColour()}" required></td>
</tr>
<tr>
<td>尺码:</td>
<td><input type="text" name="size" th:value="${clothingInfo.getSize()}" required></td>
</tr>
<tr>
<td>评价情况:</td>
<td><textarea name="evaluation" rows="10" cols="30" th:text="${clothingInfo.getEvaluation()}" />
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="修改商品信息"></td>
</tr>
</table>
</form>
</body>
</html>
解决方案
将
<tr>
<td>价格:</td>
<td><input type="value" name="price" th:text="${clothingInfo.getPrice()}" required></td>
</tr>
修改为
<tr>
<td>价格:</td>
<td><input type="value" name="price" th:value="${clothingInfo.getPrice()}" required></td>
</tr>
错误原因
在这里,使用了th:text属性来设置输入框的文本值,但是这个属性会将文本显示在输入框之外。正确的属性应该是th:value,这样文本就会显示在输入框内部了。
参考文献
chatgpt问答