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 模式设计之工厂模式学习心得
Apr 27 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
JS实现横向跑马灯效果代码
Apr 20 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
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堆排序实现原理与应用方法
2015/01/03 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Python subprocess模块常见用法分析
2018/06/12 Python
详解Python 中的容器 collections
2020/08/17 Python
Django xadmin安装及使用详解
2020/10/26 Python
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
销售总监岗位职责
2014/01/04 职场文书
建筑经济管理专业求职信分享
2014/01/06 职场文书
企业安全生产责任书
2014/04/14 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
青春励志演讲稿
2014/04/29 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL