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

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

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

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

 这段代码中最重要的部分就是onfocus这部分，如果不用onfocus，使用onclick也可以达到同样效果，比如οnfοcus="this.select()"。

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"οnfοcus="this.select()"οnmοuseοver="this.style.borderColor='#FF6600'" οnmοuseοut="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" οnmοuseοver="this.style.borderColor='#FF6600'" οnmοuseοut="this.style.borderColor=''" onFocus="if (value =='Dreamweaver'){value =''}" onBlur="if (value ==''){value='Dreamweaver'}"/> </form>

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

转载于:https://www.cnblogs.com/wt869054461/p/3776766.html

如何制作点击输入框时默认文字消失的效果相关推荐

html在背景上自动打字,Js制作点击输入框时默认文字消失的效果
为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢?从用户体验的角度出发,简化用户使用步骤,让用户用得更方便就是提高了易用性,例如当鼠标悬浮 ...
html输入时提示文字消失,html中input文字框，初始里边有文字提示。当点选时，文字消失，怎么改？...
html中input文字框,初始里边有文字提示.当点选时,文字消失,怎么改?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧 ...
从细节入手：点击输入框，提示文字瞬间变身小精灵
前言不知道大家是否曾经在填写表单时,被那些不起眼的提示文字所吸引,并且感受到了一种愉悦的交互体验?这种 "点击输入框提示文字上移且缩小" 的设计,正是为了让用户在使用电子设备时, ...
CAD中插入外部参照字体会变繁体_为什么CAD插入外部参照时有些文字消失了？
下面是本公众号文章分类目录,点击可打开分类文章列表: 安装卸载文件格式.输入输出异常.退出基本操作技巧设置及相关问题界面和显示相关问题 CAD快捷键视图设置和调整选择.组坐标系. ...
html输入时提示文字消失,inpuhtml文本框代码t 初始里边有文字提示当点击时文字消失怎么设置...
文本域() 本例演示如何在HTML页面创建文本域.用户可以在文本域写入文本. 密码域本例演示如何创建HTML的密码域. 复选框本例演示如何在HTML页中创建文本框.用户可以选中或取消选取复选框. ...
苹果手机点击输入框时页面自动放大
一.问题描述点击input搜索框时,苹果手机页面会自动放大. 二.解决问题 ** user-scalable=no是"禁止手动缩放",添加此属性后便不可手动控制页面大小.
点击输入框弹出文字html,jQuery实现点击文本框弹出热门标签的提示效果
jQuery实现点击文本框弹出热门标签的提示示例_网页代码站 body { font-size:12px;font-family:Arial; } #m_tagsItem { background:# ...
html鼠标点击时的样式,鼠标点击输入框时高亮显示边框颜色【jquery和css实现】...
这里解释如何突出显示表单字段的边框颜色.背景颜色等,如焦点上的HTML输入文本框.输入密码.选择下拉菜单和文本区域,并在失去焦点时使用jquery和css使它们正常. 突出显示焦点上的边框颜色突出显 ...
html如何自动转到ie打开,在HTML怎么修改代码以达到在点击超链接时默认以IE浏览器打开?...
1. "工具"→"Internet选项",在打开的窗口中选择"程序"选项卡,然后勾选"检查Internet Explorer是否为 ...

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

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

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

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

如何制作点击输入框时默认文字消失的效果相关推荐

最新文章

热门文章