Javascript特效之表单文本框提示信息

Javascript特效之表单文本框提示信息

我们在网页上填写信息经常会需要给用户一些提醒信息，例如提醒用户身份证文本框应该填18或者15位的身份证号码。今天来看看这类提示框怎么实现。

效果图：

在点击文本框时就弹出提示框。

实现思路其实就是在input控件焦点事件时显示出对应的对话框来提示。

这个例子用到 DHTMLgoodies_formTooltip这个类来处理并引用两个类库：form-field-tooltip.js和rounded-corners.js，看看代码：

js代码：

var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#F5F5F5');
tooltipObj.setTooltipCornerSize(15);
tooltipObj.initFormFieldTooltip();

html代码：

<fieldset>
		<legend>Form field tooltip example</legend>
		
		<table>
			<tr>
				<td><label for="firstname">First name:</label></td>
				<td><input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box"></td>
			</tr>
			<tr>
				<td><label for="lastname">Last name:</label></td>
				<td><input type="text" id="lastname" name="lastname" tooltipText="Type in your last name in this box"></td>
			</tr>
			<tr valign="top">
				<td><label for="address">Address:</label></td>
				<td><textarea id="address" name="address" tooltipText="This is the box for the address"></textarea></td>
			</tr>
			<tr valign="top">
				<td>Nationality</td>
				<td><select style="width:300px"><option>It covers this select box in IE</option></select></td>
			</tr>
		</table>		
	</fieldset>