HTML前端优化分享—用户体验优化小技巧

今天分享下”HTML前端优化分享—用户体验优化小技巧“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 设计师将优化用户在网页上经常使用的东西，如输入框。如何优化一般输入框？例如，当鼠标悬浮在输入框中时，改变输入框的颜色，并自动选择输入框中的默认文本

为了提高用户体验和易用性，一些设计师会优化用户在网页上经常使用的东西，比如输入框。如何优化一般输入框？从用户体验的角度来看，简化用户使用步骤，使用户更方便，就是提高易用性，比如鼠标悬浮在输入框中时改变输入框的颜色，自动选择输入框中的默认文本，或者点击输入框时自动删除默认内容。

这种效果听起来很复杂，但很简单，只要一小段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也可以达到同样效果，比如ο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="">

<p> http://www.qlyl1688.com </p>

<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也很有必要。以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！