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 05 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 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 MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
JS backgroundImage控制
2009/05/19 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
Web开发之JavaScript
2012/03/29 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
工地资料员岗位职责
2013/12/31 职场文书
一岗双责责任书
2014/04/15 职场文书
预防传染病方案
2014/06/14 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript