Heim >Web-Frontend >js-Tutorial >js+css实现增加表单可用性之提示文字_javascript技巧

js+css实现增加表单可用性之提示文字_javascript技巧

WBOY
WBOYOriginal
2016-05-16 17:32:591139Durchsuche

平常设计表单的时候,我们会加入一些提示文字,比如说在搜索框里,我们会提示“请输入关键字”,并在搜索框得到焦点和失去焦点的时候适时的隐藏和显示,最常见的做法是利用value来设置:

复制代码 代码如下:


<script> <BR>document.getElementById("keyword").onfocus = function() { <BR>if (document.getElementById("keyword").value == "请输入关键字") { <BR>document.getElementById("keyword").value = ""; <BR>} <BR>} <BR>document.getElementById("keyword").onblur = function() { <BR>if (document.getElementById("keyword").value == "") { <BR>document.getElementById("keyword").value = "请输入关键字"; <BR>} <BR>} <BR>document.getElementById("search").onsubmit = function() { <BR>var keyword = document.getElementById("keyword").value; <BR>if (keyword == "" || keyword == "请输入关键字") { <BR>alert("请输入关键字"); <BR>return false; <BR>} <BR>return true; <BR>} <BR></script>

如此的代码虽然实现了我们要的功能,但却不干净,原因在于“请输入关键字”这样的文本仅仅是提示文字而已,而不是value,虽然技术上没有大问题,但很多时候还是显得麻烦,比如说我们可能像让提示文字显示的颜色是灰色,而用户键入的文本则显示黑色。
下面看看如何利用css来实现更好的方式:
复制代码 代码如下:



<script> <BR>window.onload = function() { <BR>if (!document.getElementById("keyword").value) { <BR>document.getElementById("description").style.display = "inline"; <BR>} <BR>}; <BR>document.getElementById("keyword").onfocus = function() { <BR>if (!document.getElementById("keyword").value) { <BR>document.getElementById("description").style.display = "none"; <BR>} <BR>} <BR>document.getElementById("keyword").onblur = function() { <BR>if (!document.getElementById("keyword").value) { <BR>document.getElementById("description").style.display = "inline"; <BR>} <BR>} <BR>document.getElementById("search").onsubmit = function() { <BR>if (!document.getElementById("keyword").value) { <BR>alert("请输入关键字"); <BR>return false; <BR>} <BR>return true; <BR>} <BR></script>

这样的实现方式虽然CSS,JS代码都多了一些,但是结构更合理,通过引入label来显示提示文字(通过CSS的position属性定位),让value本身更单纯,而且提示文字和用户输入的文本在样式更容易控制,比如颜色的深浅,从而提高表单可用性。
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn