Js制作点击输入框时默认文字消失的效果


Posted in Javascript onSeptember 05, 2015

为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框。一般的输入框是怎样优化的呢?从用户体验的角度出发,简化用户使用步骤,让用户用得更方便就是提高了易用性,例如当鼠标悬浮在输入框时改变输入框颜色、自动选中输入框中的默认文字,或者点击输入框时自动清除默认内容等等。 这个效果听起来复杂,其实做起来却很简单,只要一小段javascript代码即可解决。下?面介绍一下几种效果的代码:

1.点击输入框选中内容的Html代码:

<form id="form1" name="form1" method="post" action=""> 
<label for="textfield">输入内容:</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()" /> 
</form>

2.鼠标悬浮在输入框上时改变边框颜色或背景色

这个效果有两种方法:方法一是使用CSS中的伪元素:focus;方法二还是使用一小段javascript; 方法一的html代码和上面的例子中一样,只不过在CSS中加入以下一段:
input:hover { border:1px solid #F00; }
在鼠标悬浮在输入框时,输入框边框就会变成红色,但是此方法只在Firefox浏览器和IE7以上版本中有效,IE6不支持,所以它有一定的局限性。 方法二的代码大部分和上面的例子中一样,只不过在在后面再加入一个一段鼠标悬浮的代码:

<form id="form1" name="form1" method="post" action=""> 
<label for="textfield">输入内容:</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()"onmouseover="this.style.borderColor='#FF6600'" onmouseout="this.style.borderColor=''" /> 
</form>

使用这段代码,大多数浏览器都可以支持。
3.点击输入框默认文字消失
还有一种效果,当鼠标点击输入框时,原有的默认文字消失。如果输入其它新内容,然后移开鼠标,输入框新内容不变;如果不输入新内容,鼠标离开输入框又还原默认文字。 这种效果也只用加入一小段javascript判断即可完成:

<form id="form1" name="form1" method="post" action="">
<label for="textfield">输入内容:</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver" onmouseover="this.style.borderColor='#FF6600'" onmouseout="this.style.borderColor=''" onFocus="if (value =='Dreamweaver'){value =''}" onBlur="if (value ==''){value='Dreamweaver'}"/> 
</form>

<textarea class="fankui_textarea" onFocus="if (value =='您的建议,我们悉心采纳;您的批评,我们仔细聆听;请详细描述您的建议或所遇到的问题。'){value =''}" onBlur="if (value ==''){value='您的建议,我们悉心采纳;您的批评,我们仔细聆听;请详细描述您的建议或所遇到的问题。'}">您的建议,我们悉心采纳;您的批评,我们仔细聆听;请详细描述您的建议或所遇到的问题。</textarea>

以上三种效果都是比较简单的javascript应用。

Javascript 相关文章推荐
Document 对象的常用方法
Jul 31 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 #Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 #Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 #Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 #Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 #Javascript
javascript 判断两个日期之差的示例代码
Sep 05 #Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 #Javascript
You might like
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
Javascript 入门基础学习
2010/03/10 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
Django Rest framework权限的详细用法
2019/07/25 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
Python脚本调试工具安装过程
2021/01/11 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
Shell如何接收变量输入
2012/09/24 面试题
古汉语文学求职信范文
2014/03/16 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
颐和园导游词
2015/01/30 职场文书
优质服务标语口号
2015/12/26 职场文书