thymeleaf输入框中内容显示在输入框外

最新推荐文章于 2023-06-20 22:09:51 发布

飞滕人生TYF

最新推荐文章于 2023-06-20 22:09:51 发布

阅读量256

点赞数 1

文章标签： spring

本文链接：https://blog.csdn.net/T_Y_F_/article/details/130744232

版权

问题

运行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问答

在这里插入图片描述

飞滕人生TYF

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
thymeleaf输入框中内容显示在输入框外

thymeleaf输入框中内容显示在输入框外
复制链接

扫一扫