input輸入框新增提示文字
阿新 • • 發佈：2019-02-04
<input> placeholder 屬性
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3School" />
<input type="submit" />
</form>
</body>
</html>
第二種 js程式碼方式
效果<script type="text/javascript"> var inputAdvice="請輸入合同編號或客戶名稱"; $(function(){ $("#search").val(inputAdvice); document.getElementById('search').style.color='#C0C0C0'; }) /**查詢輸入框點選**/ function clickMessage (){ var searchVal=$("#search").val(); if(inputAdvice==searchVal){ $("#search").val(""); document.getElementById('search').style.color='#000000'; } } /**查詢輸入框失去焦點**/ function blurMessage(){ var searchVal=$("#search").val(); if(""!=searchVal){ document.getElementById('search').style.color='#000000'; }else{ $("#search").val(inputAdvice); document.getElementById('search').style.color='#C0C0C0'; } } </script> <input type="text" id="search" onclick="clickMessage()" onblur="blurMessage()" />
