javascript如何实现下图所示的输入框边上的提示文字效果,我是小白,请谅解。

JavaScript015

javascript如何实现下图所示的输入框边上的提示文字效果,我是小白,请谅解。,第1张

这个是文本框的<input />在这里面使用一个onblur()事件

这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的

<input />可以跟一个div或者span

<span id="error" class="red">XXXXXXXX</span>这种标签

onblur()函数文本框的值判断

基本上就是这些

blur()

js实现点击输入用户名或密码的文本框在旁边弹出提示语 你可以使用formValidator.js,专门做表单验证的,效果如下:用法很简单,引用formValidator.js的核心类库,然后初始化$.formValidator.initConfig({formid: main ,debug:false,submitOnce : true})然后对要做校验的文本框编写校验代码$( #employeeNo ).formValidator({onshow : 输入范围为1到10个字符 ,在后面对应的显示提示语formValidator.js这个网上有很多实例和教程,很简单的

定义一个函数,设置输入框onfocus事件,调用这个函数。函数的用处是将输入框的value值设置为空。

代码大致如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

<script>

function xiaoshi(){

var obj=document.getElementById("text1")

obj.setAttribute("value","")//这句是关键

}

</script>

</head>

<body>

<form>

<input type="text" id="text1" value="这里是文本框" onfocus="xiaoshi()"/>

</form>

</body>

</html>