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 相关文章推荐
JQuery给网页更换皮肤的方法
May 30 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
vue axios整合使用全攻略
May 24 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
php 验证码实例代码
2010/06/01 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
js数组操作常用方法
2014/05/08 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
Python调用C/C++的方法解析
2020/08/05 Python
Python页面加载的等待方式总结
2021/02/28 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
洗手间标语
2014/06/23 职场文书
在校证明模板
2015/06/17 职场文书