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 相关文章推荐
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
vue-router单页面路由
Jun 17 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
12 种使用Vue 的最佳做法
Mar 30 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网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
实例讲解PHP表单处理
2019/02/15 PHP
Document 对象的常用方法
2009/07/31 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
医学生临床实习自我评价
2014/03/07 职场文书
儿园租房协议书范本
2014/12/02 职场文书
学校捐书活动总结
2015/05/08 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
党员转正大会主持词
2015/07/02 职场文书
教师旷工检讨书
2015/08/15 职场文书
大学班长竞选稿
2015/11/20 职场文书