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 相关文章推荐
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
Oct 30 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
JS原生实现轮播图的几种方法
Mar 23 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/03/09 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
vue-router传参用法详解
2019/01/19 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
用Python写冒泡排序代码
2016/04/12 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
anaconda如何查看并管理python环境
2019/07/05 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
美国在线家装零售商:Build.com
2016/09/02 全球购物
小学评语大全
2014/04/22 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
芙蓉镇观后感
2015/06/10 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
MySQL 字符集 character
2022/05/04 MySQL
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS