当前位置: 首页 > 知识库问答 >
问题:

HTML中的占位符

勾裕
2023-03-14

我有一个使用占位符的Thymeleaf模板,其中占位符属性指定一个简短提示,描述输入字段的预期值或格式。

占位符在输入文本为空时工作。但是,如果需要编辑包含以前输入的数据的字段,则以前输入的文本将消失,并在输入收到焦点时替换为占位符文本。

有没有办法避免这种情况?

胸腺叶模板

<form class="form-style-9" action="#" th:action="@{/guardian/save}" th:object="${guardian}" method="post">
    <ul>
    <li>

        <input type="text"  th:field="*{name}"      id="nameInputTextId"    name="field1" class="field-style field-split align-left"    placeholder="NOMBRE" />
        <input type="text"  th:field="*{surName}"   name="field2" class="field-style field-split align-right"   placeholder="APELLIDOS" />
    </li>
    <li>
        <input type="text"  th:field="*{description}"   name="field1" class="field-style field-split align-left"    placeholder="DESCRIPTION" />
        <input type="text"  th:field="*{mobile}"        name="field2" class="field-style field-split align-right"   placeholder="TELEFONO" />
    </li>
    <li>
        <input type="text"  th:field="*{email}"     name="field1" class="field-style field-split align-left"    placeholder="EMAIL" />
    </li>
    <li>
        <a href="/guardian/list">
            <input type="button" value="CANCELAR" />
        </a>
        <input type="submit" value="GRABAR" />
    </li>
    </ul>
</form>

以及生成的HTML

<!DOCTYPE HTML>

<html>
<head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="tdk" />

<!-- FAVICON -->
<link rel="apple-touch-icon" sizes="57x57" href="../../../images_sebloc/favicon/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="../../../images_sebloc/favicon/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="../../../images_sebloc/favicon/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="../../../images_sebloc/favicon/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="../../../images_sebloc/favicon/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="../../../images_sebloc/favicon/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="../../../images_sebloc/favicon/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="../../../images_sebloc/favicon/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="../../../images_sebloc/favicon/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="../../../images_sebloc/favicon/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="../../../images_sebloc/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="../../../images_sebloc/favicon/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="../../../images_sebloc/favicon/favicon-16x16.png" />


<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="_sebloc/favicon/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />

<title>tdk</title>

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,700" type="text/css" />
<link rel="stylesheet" href="/fonts/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css_sebloc/styles.css" />
<link rel="stylesheet" href="/css/jquery.mCustomScrollbar.css" />

<link rel="stylesheet" type="text/css" href="/css/jquery.mCustomScrollbar.css" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap-datepicker.css" />


<link type="text/css" href="/css/jquery.simple-dtpicker.css" rel="stylesheet" />
    <!---->

    <style type="text/css">
        body { background-color: #fefefe; padding-left: 2%; padding-bottom: 100px; color: #101010; }
        footer{ font-size:small;position:fixed;right:5px;bottom:5px; }
        a:link, a:visited  { color: #0000ee; }
        pre{ background-color: #eeeeee; margin-left: 1%; margin-right: 2%; padding: 2% 2% 2% 5%; }
        p { font-size: 0.9rem; }
        ul { font-size: 0.9rem; }
        hr { border: 2px solid #eeeeee; margin: 2% 0% 2% -3%; }
        h3 { border-bottom: 2px solid #eeeeee; margin: 2rem 0 2rem -1%; padding-left: 1%; padding-bottom: 0.1em; }
        h4 { border-bottom: 1px solid #eeeeee; margin-top: 2rem; margin-left: -1%; padding-left: 1%; padding-bottom: 0.1em; }
    </style>

    <!--[if lte IE 8]>
        <link rel="stylesheet" href="css_sebloc/side-menu-old-ie.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
        <link rel="stylesheet" href="/css_sebloc/side-menu.css" />
    <!--<![endif]-->

<!-- Responsive -->
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
            <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css" />
    <!--<![endif]-->

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="../../../js/jquery.floatThead.min.js" type="text/javascript"></script>
<script src="../../../js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="../../../js/jquery.simple-dtpicker.js"></script>

</head>
<body>




<div id="layout">
    <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
        <!-- Hamburger icon -->
        <span></span>
    </a>

    <!-- Menu -->
    <div id="menu" oncontextmenu="return false" ondragstart="return false" onmousedown="return false">
        <div class="pure-menu">
            <a class="pure-menu-heading" href="index.html">
                <img src="../../../images_sebloc/home.png" width="136" height="43" alt="POWEREDCUB SL" />
            </a>

            <!-- Notifications Menu -->
            <ul class="pure-menu-list">
                <li class="pure-menu-title">Notifications</li>
                <li class="pure-menu-item">
                    <ul class="menu_notifications">
                        <!-- General Notification -->
                        <li>
                            <a href="#" class="icon_notification"><span><i class="fa fa-bell-o fa-fw"></i></span></a>
                            <!--
                                Alert counter of General notification
                                1. Add to the div the class show_info
                                2. Modify the number
                            -->
                            <div class="alert_counter"><span>0</span></div>
                        </li>
                        <!-- No Connection Notification -->
                        <li>
                            <a href="#" class="icon_notification"><span><i class="fa fa-wifi fa-fw"></i></span></a>
                            <!--
                                Alert counter of No Connection notification
                                1. Add to the div the class show_info
                                2. Modify the number
                            -->
                            <div class="alert_counter"><span>0</span></div>
                        </li>
                        <!-- No Power Notification -->
                        <li>
                            <a href="#" class="icon_notification"><span><i class="fa fa-battery-quarter fa-fw"></i></span></a>
                            <!--
                                Alert counter of No Power notification
                                1. Add to the div the class show_info
                                2. Modify the number
                            -->
                            <div class="alert_counter show_info"><span>1</span></div>
                        </li>
                    </ul>
                </li>
            </ul>
            <div class="clearfix"></div>

            <!-- Start Menu -->
            <ul class="pure-menu-list">
                <li class="pure-menu-title">Start</li>

                 <li class="menu-principal pure-menu-item ">
                    <a href="/deviceevent/list" class="pure-menu-link"><i class="fa fa-mixcloud fa-lg fa-fw"></i>&nbsp; Home</a>
                 </li>

                 <li class="menu-principal pure-menu-item">
                     <a href="/timeLapse/list" class="pure-menu-link">
                        <i class="fa fa-calendar-o fa-lg fa-fw"></i>&nbsp; Horarios Alarma
                    </a>
                 </li>

                  <li class="menu-principal pure-menu-item pure-menu-selected">
                     <a href="/guardian/list" class="pure-menu-link">
                        <i class="fa fa-calendar-o fa-lg fa-fw"></i>&nbsp; Guardianes
                    </a>
                 </li>

                <li class="menu-principal pure-menu-item"><a href="#" class="pure-menu-link"><i class="fa fa-user fa-lg fa-fw"></i>&nbsp; Account</a></li>
                <li class="menu-principal pure-menu-item"><a href="#" class="pure-menu-link"><i class="fa fa-cogs fa-lg fa-fw"></i>&nbsp; SetUp</a></li>
                <li class="menu-principal pure-menu-item">
                    <a href="#" class="pure-menu-link"><i class="fa fa-tv fa-lg fa-fw"></i>&nbsp; Ideefe Web</a>
                </li>
                <li class="menu-principal pure-menu-item">
                    <a href="#" class="pure-menu-link"><i class="fa fa-question-circle fa-lg fa-fw"></i>&nbsp; Help</a>
                </li>
            </ul>
        </div>
        <div id="dm_version" class="version"><b>Device manager </b><span class="orange">V 0.1.2</span><br />© Ideefe and Wits 2016
        </div>
    </div>

    <div id="main">
        <!-- Header Menu -->
        <div id="menu_header" class="header">
            <ul class="menu_icon">
                <li>
                    <a href="" class="icon"><span><i class="fa fa-user fa-lg"></i></span></a>
                    <!-- User -->
                    <a href="" class="user_name">Sebloc demo<i class="fa fa-angle-down user_name_down"></i></a>
                </li>
            </ul>
            <div class="clear"></div>
        </div>

        <div class="content">
            <div class="pure-g">
                <div class="pure-u-1-1 pure-u-xl-14-24 pure-u-med-1">

                    <!-- Content Left Wrap -->
                    <div id="devices" class="content_l_wrap">
                        <div class="windowHead">

                            <h2>NUEVO GUARDIAN</h2>
                            <!-- Pagination & Search Module -->
                            <div class="search_module">

                            </div>
                            <a href="#" class="ico_arrow show_hide"><i class="fa fa-chevron-up"></i></a>
                        </div>
                        <div class="windowContent">






                            <div class="store_content" data-mcs-theme="dark-3">

                            <style type="text/css">
.form-style-9{
    max-width: 750px;
    background: #FAFAFA;
    padding: 30px;
    margin: 50px auto;
    box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    border: 6px solid #901E3C;
}
.form-style-9 ul{
    padding:0;
    margin:0;
    list-style:none;
}
.form-style-9 ul li{
    display: block;
    margin-bottom: 10px;
    min-height: 35px;
}
.form-style-9 ul li  .field-style{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 8px;
    outline: none;
    border: 1px solid #B0CFE0;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;

}.form-style-9 ul li  .field-style:focus{
    box-shadow: 0 0 5px #B0CFE0;
    border:1px solid #B0CFE0;
}
.form-style-9 ul li .field-split{
    width: 49%;
}
.form-style-9 ul li .field-full{
    width: 100%;
}
.form-style-9 ul li input.align-left{
    float:left;
}
.form-style-9 ul li input.align-right{
    float:right;
}
.form-style-9 ul li textarea{
    width: 100%;
    height: 100px;
}
.form-style-9 ul li input[type="button"],
.form-style-9 ul li input[type="submit"] {
    -moz-box-shadow: inset 0px 1px 0px 0px #3985B1;
    -webkit-box-shadow: inset 0px 1px 0px 0px #3985B1;
    box-shadow: inset 0px 1px 0px 0px #3985B1;
    background-color: #216288;
    border: 1px solid #17445E;
    display: inline-block;
    cursor: pointer;
    color: #FFFFFF;
    padding: 8px 18px;
    text-decoration: none;
    font: 12px Arial, Helvetica, sans-serif;
}
.form-style-9 ul li input[type="button"]:hover,
.form-style-9 ul li input[type="submit"]:hover {
    background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);
    background-color: #28739E;
}
</style>



<form class="form-style-9" action="/guardian/save" method="post">
  <ul>
  <li>

      <input type="text" id="nameInputTextId" name="name" class="field-style field-split align-left" placeholder="NOMBRE" value="" />
      <input type="text" name="surName" class="field-style field-split align-right" placeholder="APELLIDOS" id="surName" value="" />
  </li>
  <li>
      <input type="text" name="description" class="field-style field-split align-left" placeholder="DESCRIPTION" id="description" value="" />
      <input type="text" name="mobile" class="field-style field-split align-right" placeholder="TELEFONO" id="mobile" value="" />
  </li>
  <li>
      <input type="text" name="email" class="field-style field-split align-left" placeholder="EMAIL" id="email" value="" />
  </li>
  <li>
    <a href="/guardian/list">
            <input type="button" value="CANCELAR" />
        </a>
    <input type="submit" value="GRABAR" />
  </li>
  </ul>
<input type="hidden" name="_csrf" value="a5ecc9df-964e-4824-8402-926db7f377f6" /></form>


                            </div>
                        </div>
                        <div class="windowFoot">

                        </div>
                    </div>

                </div>
                <div class="pure-u-1-1 pure-u-xl-10-24 pure-u-med-1">

                    <!-- Content right Wrap -->
                    <div class="content_r_wrap">
                        <!-- Devices Map Module -->
                        <div class="windowHead">
                            <h2>LOCATION INFO</h2>
                            <a href="#" class="ico_arrow show_hide3"><i class="fa fa-chevron-up"></i></a>
                        </div>
                        <div class="windowContentMap">
                            <div>
                                API GOOGLE MAPS (iframe configuration must be width 100% height 100%)
                            </div>
                        </div>
                        <div class="windowFoot">
                            <div class="windowFootL"><span>ADDRESS:</span> Rue du Marteau Nº25 BTE65</div>
                            <div class="windowFootR"><span>WORKER:</span> Name Surname</div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById("nameInputTextId").focus();
</script>
<!-- Js zone -->
<script src="../../../js/ui.js"></script>
</body>
</html>

共有2个答案

谭成业
2023-03-14

我认为这个问题与设置占位符无关。这可能是由于您将value属性指定为“”的原因,即在您指定value=“”的文本字段中。这将使文本字段的值为空,当文本字段为空时,将显示占位符。尝试删除value=”“。

巫马瀚漠
2023-03-14

我解决了这个问题。删除此文件解决了问题

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
 类似资料:
  • 问题内容: 看来这是一个众所周知的问题,但是我在Google上找到的所有解决方案都不适用于我新下载的IE9。 启用and 标签上的属性的最喜欢的方式是哪种? 可选:我为此花了很多时间,而且还没有去寻找房产。您对此还有意见吗?显然,我可以检查PHP中的值,但是对于帮助用户使用此属性非常方便。 问题答案: HTML5占位符jQuery插件 -通过的Mathias Bynens上协作者HTML5样板和j

  • 问题内容: 如何以html形式居中输入字段的占位符对齐方式? 我正在使用以下代码,但是它不起作用: CSS-> HTML-> 问题答案: 如果只想更改占位符样式

  • 问题内容: 看来这是一个众所周知的问题,但是我在Google上找到的所有解决方案都不适用于我新下载的IE9。 启用and 标签上的属性的最喜欢的方式是哪种? 可选:我为此花了很多时间,而且还没有去寻找房产。您对此还有意见吗?显然,我可以检查PHP中的值,但是对于帮助用户使用此属性非常方便。 问题答案: HTML5占位符jQuery插件 -通过的Mathias Bynens和jsPerf https

  • 我有一个Thymeleaf模板,我想把一个对象的属性作为占位符,但是我看到的是。

  • 类型 Glide允许用户指定三种不同类型的占位符,分别在三种不同场景使用: placeholder error fallback 占位符(Placeholder) 占位符是当请求正在执行时被展示的 Drawable 。当请求成功完成时,占位符会被请求到的资源替换。如果被请求的资源是从内存中加载出来的,那么占位符可能根本不会被显示。如果请求失败并且没有设置 error Drawable ,则占位符将

  • #{}速度快,能防止sql注入,是占位符方式,先预编译,然后填充参数,字符串格式,用户名=(___),参数只是下划线上的内容 ${}是直接拼接到语句上,这种方式需要自己拼括号和参数,但是也可以拼接想执行的任何语句,也就是传说中的sql注入 详情如下 在MyBatis中使用参数进行SQL拼装经常会使用到#{var}和${var}两种参数的设置方式。下面是两种方式的不用之处: #{var} 使用预编译