JavaScript学习笔记3--文本框获得焦点，文本框里提示信息自动消失

在Web页面上，有时我们要在文本输入框里给点提示信息，告诉用户在这个地方该输入什么内
容，比如说“请输入评论内容...”等等之类的提示信息，当用户把光标单位在输入框的时候，
不应该让用户去清除那些提示信息，我们可以写个脚本来帮我们做这件事情,请看下面的例子：

<html>
<head>
<title>对XX的评论</title>
<script type="text/javascript">
varbFlag=true;//全局变量,用于判断是否允许清除文本框内容
//用于清除输入框中提示信息的方法
functionclearTip(){
        varoTxt=document.getElementById("txt1");
         if(bFlag==true){
           oTxt.value="";
           bFlag=false;
        }
}
</script>
</head>
<body>
<form name="form1"action=" "method="post">
<textarea cols="50"rows="20"id="txt1"onfocus="clearTip()">请输入评论的内容...
</textarea><br />
<input type="button"value="提交"onclick="this.disabled=true;this.form.submit()"/>
</from>
</body>
</html>

运行上面的示例，可以看到当焦点定位在文本框，提示信息“请输入评论的内容...”将会自动
消失，这里需要注意的是用户可能中途去做其他事情，使得文本框失去焦点，当他重新回来
输入的时候，又获得了焦点，这时会再次触发onfocus事件，调用clearTip方法，把前面输入的
内容清除了，这是我们不希望结果。所以可以设置个全局变量bFlag作为标志位，当清除过一次
文本框的内容之后就改变标志位，不再允许通过clearTip()方法清除文本框的内容。

JavaScript学习笔记3--文本框获得焦点，文本框里提示信息自动消失相关推荐

JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript 学习笔记（二）
JavaScript 学习笔记(二) 文章目录 JavaScript 学习笔记(二) 一 JSON 1. JSON 对象什么是JSON对象 JSON对象与Javascript对象的区别在JavaS ...
JavaScript 学习笔记 - 挂载事件 Demo
JavaScript 学习笔记 - 挂载事件 Demo 例子 addEventListener 监听事件挂载事件的同时带上参数 dispatchEvent 触发事件 removeEventListe ...
千锋JavaScript学习笔记
千锋JavaScript学习笔记文章目录千锋JavaScript学习笔记写在前面 1. JS基础 1.1 变量 1.2 数据类型 1.3 数据类型转换 1.4 运算符 1.5 条件 1.6 循环 ...
JavaScript学习笔记05【高级——DOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记之DOM篇，带你全面了解什么是DOM
DOM在前面的JavaScript学习笔记(一)–JS基础里简单提到过,它是浏览器厂商提供的用来控制html / css 的代码的文档对象模型,是JavaScript的重要组成部分,现在带大家详细了解 ...
JavaScript学习笔记(九）(验证框架,layer弹出层)
JavaScript学习笔记(九) 一.jQuery Validate验证框架 1.引入相关插件路径 2. 修改一些规则 3. 自定义验证规则 4.异步验证整体代码二.layer弹出层 1.引入相 ...
JavaScript学习笔记(四)(DOM)
JavaScript学习笔记(四) DOM 一.DOM概述二.元素对象 2.1 获取方式 (1).通过ID获取一个元素对象,如果没有返回null (2).通过`标签名`获取一组元素对象,,如果没有返 ...
JavaScript学习笔记（六）(Jquery入门)
JavaScript学习笔记(六) 一.jQuery是什么? 二.jQuery的安装三.载入事件区别四.jQuery对象和DOM对象的区别 DOM对象和Jquery对象互转五.选择器 5.1 j ...
前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型其实就是操作 html 中的标签的一些能力我们可以操作哪些内容获取一个元素 ...

JavaScript学习笔记3--文本框获得焦点，文本框里提示信息自动消失

JavaScript学习笔记3--文本框获得焦点，文本框里提示信息自动消失相关推荐

最新文章

热门文章