我有一个使用占位符的 Thymeleaf 模板，其中占位符属性指定一个简短的提示，描述输入字段的预期值或格式。
当输入文本为空时，占位符起作用。但是，如果需要编辑包含先前输入的数据的字段，则当输入获得焦点时，先前输入的文本会消失并替换为占位符文本。
有办法避免这种情况吗？
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> 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> 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> 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> 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> 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> 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> 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>
最佳答案
我找出问题所在了。删除这个文件就解决了问题
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
关于javascript - HTML 中的占位符，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42749025/