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 相关文章推荐
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 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 is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
Javascript Global对象
2009/08/13 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
浅谈五大Python Web框架
2017/03/20 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
自荐书模板
2013/12/19 职场文书
真诚的求职信
2014/07/04 职场文书
华清池导游词
2015/02/02 职场文书
运动会800米赞词
2015/07/22 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python