今天小编跟大家讲解下有关HTML输入框优化以此来提高用户体验和易用度 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML输入框优化以此来提高用户体验和易用度 的相关资料，希望小伙伴们看了有所帮助。
为了提高用户体验和易用度 一些设计师会对网页中用户经常用的东西进行优化 比如输入框。一般的输入框是怎样优化的呢 从用户体验的角度出发 简化用户使用步骤 让用户用得更方便就是提高了易用性 例如当鼠标悬浮在输入框时改变输入框颜色、自动选中输入框中的默认文字 或者点击输入框时自动清除默认内容等等。 这个效果听起来复杂 其实做起来却很简单 只要一小段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> 这段代码中最重要的部分就是onfocus这部分 如果不用onfocus 使用onclick也可以达到同样效果 比如onfocus="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"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> HTML5中可以直接使用input的placeholder属性： 复制代码代码如下: <input type="search"name="user_search"placeholder="Search W3School"/> 以上三种效果都是比较简单的javascript应用 虽然已经超越了Html代码的范畴 但掌握它们对Html的应用和网页制作带来很大便利 所以在必要的时候 掌握一些简单的javascript也是很有必要的。来源：爱蒂网
