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 相关文章推荐
js中substring和substr的详细介绍与用法
Aug 29 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
js实现索引图片切换效果
Nov 21 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
javascript的setTimeout()使用方法总结
Nov 20 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与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
Python写的贪吃蛇游戏例子
2014/06/16 Python
在双python下设置python3为默认的方法
2018/10/31 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
python3获取url文件大小示例代码
2019/09/18 Python
Python实现爬取并分析电商评论
2020/06/19 Python
python中remove函数的踩坑记录
2021/01/04 Python
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
关于旷工的检讨书
2014/02/02 职场文书
党员教师工作决心书
2014/03/13 职场文书
培训协议书范本
2014/04/22 职场文书
个人学习总结范文
2015/02/15 职场文书
法院答辩状格式
2015/05/22 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python