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


Posted in Javascript onJune 03, 2013

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

<form id="search"> 
<input type="text" id="keyword" name="keyword" value="请输入关键字"> 
<button>搜索</button> 
</form> 
<script> 
document.getElementById("keyword").onfocus = function() { 
if (document.getElementById("keyword").value == "请输入关键字") { 
document.getElementById("keyword").value = ""; 
} 
} 
document.getElementById("keyword").onblur = function() { 
if (document.getElementById("keyword").value == "") { 
document.getElementById("keyword").value = "请输入关键字"; 
} 
} 
document.getElementById("search").onsubmit = function() { 
var keyword = document.getElementById("keyword").value; 
if (keyword == "" || keyword == "请输入关键字") { 
alert("请输入关键字"); 
return false; 
} 
return true; 
} 
</script>

如此的代码虽然实现了我们要的功能,但却不干净,原因在于“请输入关键字”这样的文本仅仅是提示文字而已,而不是value,虽然技术上没有大问题,但很多时候还是显得麻烦,比如说我们可能像让提示文字显示的颜色是灰色,而用户键入的文本则显示黑色。
下面看看如何利用css来实现更好的方式:
<style> 
#wrapper { position: relative; display: inline; } 
#description { position: absolute; left: 1px; color: #999999; display: none; } 
</style> 
<form id="search"> 
<div id="wrapper"> 
<label for="keyword" id="description">请输入关键字</label> 
<input type="text" id="keyword" name="keyword"> 
</div> 
<button>搜索</button> 
</form> 
<script> 
window.onload = function() { 
if (!document.getElementById("keyword").value) { 
document.getElementById("description").style.display = "inline"; 
} 
}; 
document.getElementById("keyword").onfocus = function() { 
if (!document.getElementById("keyword").value) { 
document.getElementById("description").style.display = "none"; 
} 
} 
document.getElementById("keyword").onblur = function() { 
if (!document.getElementById("keyword").value) { 
document.getElementById("description").style.display = "inline"; 
} 
} 
document.getElementById("search").onsubmit = function() { 
if (!document.getElementById("keyword").value) { 
alert("请输入关键字"); 
return false; 
} 
return true; 
} 
</script>

这样的实现方式虽然CSS,JS代码都多了一些,但是结构更合理,通过引入label来显示提示文字(通过CSS的position属性定位),让value本身更单纯,而且提示文字和用户输入的文本在样式更容易控制,比如颜色的深浅,从而提高表单可用性。
Javascript 相关文章推荐
javascript编程起步(第四课)
Feb 27 Javascript
javascript 在firebug调试时用console.log的方法
May 10 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
JS跳转手机站url的若干注意事项
Oct 18 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 #Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 #Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 #Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 #Javascript
js内存泄露的几种情况详细探讨
May 31 #Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 #Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 #Javascript
You might like
用PHP生成静态HTML速度快类库
2007/03/18 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
PHPThumb图片处理实例
2014/05/03 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
js multiple全选与取消全选实现代码
2012/12/04 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
Vue中key的作用示例代码详解
2020/06/10 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
python实现计算器功能
2019/10/31 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
商得四方公司面试题(gid+)
2014/04/30 面试题
宾馆总经理岗位职责
2014/02/14 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
社会工作专业求职信
2014/07/15 职场文书
水浒传读书笔记
2015/06/25 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书