jQuery 实现文本框文字水印

ITPOW2017/9/10 22:41:24

CSS

.watermark { color:#808080; }

HTML

<input type="text" class="watermark" data-watermark="用户名" value="用户名" onfocus="javascript:focusWatermark(this);" onblur="javascript:blurWatermark(this);">

JavaScript

function focusWatermark(e) {
	var that = $(e);
	if (that.val() == that.data("watermark")) {
		that.val("");
		that.removeClass("watermark");
	}
}
function blurWatermark(e) {
	var that = $(e);
	if (that.val() == "") {
		that.val(that.data("watermark"));
		that.addClass("watermark");
	}
}

取值

取值时要判断值是不是等于 data-watermark，是的话，说明是水印值，用 "" 代替。

<<返回首页<<