js控制html文字提示语的出现和隐藏
有时我们需要在点击html输入框的时候,旁边会出现提示语。在输入字符的时候,输入框下边会出现输入了多少字符的提示。
请看下面实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js练习</title>
<style type="text/css">
body {
background: url("img/01.jpg") no-repeat center; }
div {
margin:0 auto; }
</style>
</head>
<script type="text/javascript">
window.onload= function(){
var aInput ;
var aTd;
var aName;
var aMsg;
var countNum;
var count = document.getElementById("count");
aInput= document.getElementsByTagName("input");
aTd= document.getElementsByTagName("td");
aName= aInput[0];
aMsg= aTd[1];
aName.onfocus= function(){
aMsg.innerHTML= '时间格式:YYYY-MM-DD 或者 YYYYMMDD ';
} aName.onblur= function(){
countNum= this.value.length;
if(countNum==0){
aMsg.innerHTML= '';
}
else if(countNum>10 || countNum<5){
aMsg.innerHTML= '<span style="color:red">请输入5--10个字符!</span>';
return false;
}
} aName.onkeyup= function(){
countNum = this.value.length;
count.innerHTML= countNum +'个字符';
if(countNum==0){
count.innerHTML='';
}
}
} </script>
<body > <form method="post" >
<table>
<tr>
<td>
<input type="text" >
</td>
<td></td> </tr>
<tr>
<td id="count"></td>
</tr>
</table>
</form>
</body>
</html>
实例里面的js代码,也可以在script标签里定义为多个有名字的方法。然后在input标签里增加事件。
js控制html文字提示语的出现和隐藏的更多相关文章
- js 控制输入文字个数(换行不算)
如题,换行符在textarea中是要当成一个字符的.用普通的maxlength属性就不行了,于是想到通过事件来控制输入文字的长度. 注意哦,回车换行不能算成字符.这样的话,普通的substring等方 ...
- js 控制选中文字
//脚本获取网页中选中文字 var word = document.selection.createRange().text; //获取选中文字所在的句子 var range = documen ...
- Html+js 控制input输入框提示
<input type="text" class="fl plsearch_txt" id="key" value="请输入 ...
- js 控制输入文字的字数
直接上代码. <html> <head> </head> <body> <textarea id='txtArea' cols='50' rows ...
- selenium加载配置参数,让chrome浏览器不出现‘Chrome正在受到自动软件的控制’的提示语,以及后台静默模式启动自动化测试,不占用桌面的方法
一:自动化测试的时候,启动浏览器出现‘Chrome正在受到自动软件的控制’,怎么样隐藏,今天学习分享: 在浏览器配置里加个参数,忽略掉这个警告提示语,disable_infobars option = ...
- JS控制文字只显示两行,超出部分显示省略号
由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...
- 忽略‘Chrome正在受到自动软件的控制’的提示语,以及后台静默模式启动。
一.使用Chrome做的时候,会看到浏览器上方出现‘Chrome正在受到自动软件的控制’的提示语, 若想忽略此提示信息,在浏览器配置里加个参数:disable_infobars 代码如下 : # co ...
- JS点击查看更多内容 控制段落文字展开折叠
JavaScript+jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能 ...
- 用js实现文字提示层 ---总结
文字提示层在项目中应该是比较常见的,我工作中项目中就用到了,原理是一样,只不过形式不一样,今天通过看视频学习,学会了,总结下: 首先,页面效果如下: 需求: 当鼠标移入到红色字体是,提示框会显示在下 ...
随机推荐
- DBCP、C3P0、Proxool 、 BoneCP开源连接池的比《转》
简介 使用评价 项目主页 DBCP DBCP是一个依赖Jakarta commons-pool对象池机制的数据库连接池.DBCP可以直接的在应用程序用使用 可以设置最大和最小连接,连接等待时 ...
- Win7_SendTo文件夹
Win7系统浮动sendto目录现在被移到了这里 : %APPDATA%\Microsoft\Windows\SendTo %APPDATA%是个环境变量,具体来说是在这里: C:\users\??? ...
- SG 复习全部 (全部SG 总览)
1. SQL 基础 进入查缺补漏阶段 2. PL/SQL 进入 practice 阶段 3. Fundamental 1 这部分还是比较重要 architecture 数据库启动与关闭步骤 insta ...
- Linux内核访问外设I/O--动态映射(ioremap)和静态映射(map_desc) (转载)
[转](转)Linux内核访问外设I/O资源的方式-静态映射(map_desc)方式 Linux内核访问外设I/O资源的方式 Author: Dongas Date: 08-08-02 我们知道默认外 ...
- andriod之摄像头驱动流程
camera成像原理: 景物通过镜头生产光学图像投射到sensor表面上,然后转为模拟电信号,经过数模变成数字图像信号,在经过DSP加工出来,然后在通过IO接口传输到CPU处理. 由于摄像头满足总线. ...
- Linux runlevel 运行级别
runlevel可以认为是系统状态,形象一点,您可以认为runlevel有点象微软的windows操作系统中的Normal,safemode,和Command prompt only. Linux系统 ...
- Bootstrap的标题
一.定义标题 Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样 ...
- 循环效率对比 js node c# mssql
- Lua 栈中元素的位置
Lua与C.C#等的交互是通过栈来实现的,每次插入元素都是放在栈顶(top),至于元素的index,可以使用正数和负数两种方式, 如取栈底开始至第index个元素 -index = gettop - ...
- toolbar
toolbar= (Toolbar) findViewById(R.id.toolbar_mainactivity); // 设置主标题及其颜色 toolbar.setTitle("Andr ...