HTML键入框提升以此来提升客户体验和易用度

以便提升客户体验和易用度,1些设计方案师会对网页页面选用户常常用的物品开展提升,例如键入框。1般的键入框是如何提升的呢?从客户体验的角度考虑,简化客户应用流程,让客户用得更便捷便是提升了易用性,比如当电脑鼠标飘浮在键入框时更改键入框色调、全自动选定键入框中的默认设置文本,或点一下键入框时全自动消除默认设置內容这些。

这个实际效果听起来繁杂,实际上做起来却很简易,要是1小段javascript编码便可处理。下面详细介绍1下几种实际效果的编码。

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.电脑鼠标飘浮在键入框上时更改边框色调或情况色

这个实际效果有两种方式:方式1是应用CSS中的伪元素:focus;方式2還是应用1小段javascript; 方式1的html编码和上面的事例中1样,只但是在CSS中添加下列1段:

拷贝编码
编码以下:

input:hover { border:1px solid #F00; }

在电脑鼠标飘浮在键入框时,键入框边框就会变为鲜红色,可是此方式只在Firefox访问器和IE7以上版本号中合理,IE6不适用,因此它有1定的局限性。 方式2的编码绝大多数和上面的事例中1样,只但是在在后边再添加1个1段电脑鼠标飘浮的编码:

拷贝编码
编码以下:

<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.点一下键入框默认设置文本消退

也有1种实际效果,当电脑鼠标点一下键入框时,原来的默认设置文本消退。假如键入其它新內容,随后移开电脑鼠标,键入框新內容不会改变;假如不键入新內容,电脑鼠标离去键入框又复原默认设置文本。 这类实际效果也只用添加1小段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" />

以上3种实际效果全是较为简易的javascript运用,尽管早已跨越了Html编码的范围,但把握它们对Html的运用和网页页面制做带来很大便捷,因此在必要的情况下,把握1些简易的javascript也是很必须的。