(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-02-17)

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

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

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

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

这个效果有两种方法:方法一是使用CSS中的伪元素:focus;方法二还是使用一小段javascript; 方法一的html代码和上面的例子中一样,只不过在CSS中加入以下一段:
input:hover { border:1px solid #F00; }
在鼠标悬浮在输入框时,输入框边框就会变成红色,但是此方法只在Firefox浏览器和IE7以上版本中有效,IE6不支持,所以它有一定的局限性。 方法二的代码大部分和上面的例子中一样,只不过在在后面再加入一个一段鼠标悬浮的代码:
<form id="form1" name="form1" method="post" action=""> 2 <label for="textfield">输入内容:</label> 3 <input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()"onmouseover="this.style.borderColor='#FF6600'" onmouseout="this.style.borderColor=''" /> 4 </form>
使用这段代码,大多数浏览器都可以支持。

3.点击输入框默认文字消失

还有一种效果,当鼠标点击输入框时,原有的默认文字消失。如果输入其它新内容,然后移开鼠标,输入框新内容不变;如果不输入新内容,鼠标离开输入框又还原默认文字。 这种效果也只用加入一小段javascript判断即可完成:
<form id="form1" name="form1" method="post" action="">2 <label for="textfield">输入内容:</label> 3 <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'}"/> 4 </form>
<textarea class="fankui_textarea" onFocus="if (value =='您的建议,我们悉心采纳;您的批评,我们仔细聆听;请详细描述您的建议或所遇到的问题。'){value =''}" onBlur="if (value ==''){value='您的建议,我们悉心采纳;您的批评,我们仔细聆听;请详细描述您的建议或所遇到的问题。'}">您的建议,我们悉心采纳;您的批评,我们仔细聆听;请详细描述您的建议或所遇到的问题。</textarea>
以上三种效果都是比较简单的javascript应用。

Js制作点击输入框时默认文字消失的效果的更多相关文章

  1. js 鼠标点击文本框 提示文字消失

    onfocus="if(this.value==defaultValue) {this.value='';}" onblur="if(!value) {value=def ...

  2. td默认文字超出后显示..,点击tr时td文字显示完整

    做项目时,产品提的需求,table表格里面,每一列限制文字超出宽度后显示省略号,等点击td时,文字显示完整,今天整理了一下代码,积累一下 备注:1.邮箱和网址,在td里面不会自动换行,需要增加word ...

  3. event.srcElement在火狐(FireFox)下的兼容问题。搜索框获得焦点时默认文字变化

    前言: 项目中用到了一个功能,搜索框里有默认的文字,当搜索框获得焦点时里面的默认文字消失,如果失去焦点时搜索框内容为空则让里面的内容回复默认!,. 实现: 很轻松的在网上找到了类似代码 $(" ...

  4. js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  5. 登录界面,body上有背景图,点击输入框时,弹出的手机键盘会把背景图顶变形,而且会把footer顶上去

    js: //防止背景图被手机键盘压缩变形 $(document).ready(function () { $('body').css({'height':$(window).height()}) }) ...

  6. js制作点击会自动隐藏的导航栏(固定在在头部的)

    想必大家应该见过这样的特效,本来头部是固定在网页的最上方的,点一下缩进去,再点一下 又可以缩回来,这种效果怎么实现的呢,我今天就做了一个.菜鸟勿喷. @charset "utf-8" ...

  7. JS jQuery 点击页面漂浮出文字

    看到有些网站点击页面任意地方都会弹出文字出来 感觉很炫酷 但其实实现方法很简单 哇哈哈哈~~~ // 调用 ( e, 消失毫秒, 数组, 向上漂浮距离) $(document).click(funct ...

  8. html中input文本框,初始里边有文字提示,当点击时,文字消失,怎么设置?

    使用onfocus事件检查当前值,如果是默认值,就将value属性置空.如:<input type="text" value="请输入内容" onfocu ...

  9. JS jQuery 点击页面弹出文字

    <style> .animate{ animation:myfirst 3s; -moz-user-select:none;/*火狐*/ -webkit-user-select:none; ...

随机推荐

  1. vm虚拟机挂载usb

    首先得保证能在VM里看到usb设备,如图

  2. Nodejs学习之一 下载安装与部署nodejs

    1,下载nodejs 访问nodejs官网 www.nodejs.org/download/   下载与机器相匹配的版本   2,安装nodejs 下载下来的msi包一直点击下一步即可   3,部署环 ...

  3. Linux下基于HTTP协议带用户认证的GIT开发环境设置

    Git 的访问可以采用 HTTP 或 SSH 协议安全的访问,通常我们使用 gitlib 进行 Web 管理,但是在 Linux 命令行开发环境下,基本都是使用 SSH 协议,只需要在 gitlib ...

  4. makefile实例(2)-多个文件实例

    1,源文件依赖关系 defs.h command.h buffer.h main.cpp * util.cpp * kde.cpp * * command.cpp * * display.cpp * ...

  5. 在Eclipse中用TODO标签管理任务

    在Eclipse中用TODO标签管理任务 Elipse为Java项目的时候,有一个很人性化的“任务管理”功能,利用这个功能可以方便地将项目中一些需要处理的任务记录下来.先来看看“任务管理”是怎么使用的 ...

  6. simpletest:一个简单的PHP试工具

    1. 下载: http://simpletest.org/ .2. 下载后,只要测试文件中包含如下两个文件,就可以用了 : <?php require_once('simpletest/auto ...

  7. Loadrunner中与事务相关的概念及函数

    一.事务 事务是指用户在客户端做一种或多种业务所需要的操作集,通过事务函数可以标记完成该业务所需要的操作内容:另一方面可以用来统计用户操作的相应时间.事务响应时间是指通过记录用户请求的开始时间和服务器 ...

  8. pssh 不能执行指定用户命令

    问题: 一个脚本a.sh(必须root用户执行),在本地可以运行,通过pssh  -h ip_file "cd /home/byte/a.sh"不能执行. 原因: 分析应该是ssh ...

  9. nohub命令

    http://jingyan.baidu.com/article/335530daa4707f19cb41c3ef.html

  10. 数据结构(11) -- 邻接表存储图的DFS和BFS

    /////////////////////////////////////////////////////////////// //图的邻接表表示法以及DFS和BFS //////////////// ...