有时我们需要在点击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&nbsp;或者&nbsp;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文字提示语的出现和隐藏的更多相关文章

  1. js 控制输入文字个数(换行不算)

    如题,换行符在textarea中是要当成一个字符的.用普通的maxlength属性就不行了,于是想到通过事件来控制输入文字的长度. 注意哦,回车换行不能算成字符.这样的话,普通的substring等方 ...

  2. js 控制选中文字

     //脚本获取网页中选中文字 var word = document.selection.createRange().text;  //获取选中文字所在的句子 var range =  documen ...

  3. Html+js 控制input输入框提示

    <input type="text" class="fl plsearch_txt" id="key" value="请输入 ...

  4. js 控制输入文字的字数

    直接上代码. <html> <head> </head> <body> <textarea id='txtArea' cols='50' rows ...

  5. selenium加载配置参数,让chrome浏览器不出现‘Chrome正在受到自动软件的控制’的提示语,以及后台静默模式启动自动化测试,不占用桌面的方法

    一:自动化测试的时候,启动浏览器出现‘Chrome正在受到自动软件的控制’,怎么样隐藏,今天学习分享: 在浏览器配置里加个参数,忽略掉这个警告提示语,disable_infobars option = ...

  6. JS控制文字只显示两行,超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  7. 忽略‘Chrome正在受到自动软件的控制’的提示语,以及后台静默模式启动。

    一.使用Chrome做的时候,会看到浏览器上方出现‘Chrome正在受到自动软件的控制’的提示语, 若想忽略此提示信息,在浏览器配置里加个参数:disable_infobars 代码如下 : # co ...

  8. JS点击查看更多内容 控制段落文字展开折叠

    JavaScript+jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能 ...

  9. 用js实现文字提示层 ---总结

    文字提示层在项目中应该是比较常见的,我工作中项目中就用到了,原理是一样,只不过形式不一样,今天通过看视频学习,学会了,总结下: 首先,页面效果如下:  需求: 当鼠标移入到红色字体是,提示框会显示在下 ...

随机推荐

  1. mypc--------------->lspci,lsusb,meminfo cpuinfo ioports filesystems interrupts mounts net partitions pagetypeinfo slabinfo timer_list uptime version zoneinfo 等配置信息

    [user@username home]$ lspci00:00.0 Host bridge: Intel Corporation 4th Gen Core Processor DRAM Contro ...

  2. [转载]VFS—Kernel Space & User Space

    在了解虚拟文件系统之前 , 需要先了解 Kernel Space 和 User Space 的区别 . 二者的差别在于内存使用上安全机制的差异 . kernel 执行时会占据一段系统的内存空间 , 这 ...

  3. LINUX一切皆文件

    只要用过linux的筒子,或者保守点说接触到一些linux思想的同志肯定听说过这样一句话,在linux下,“一切皆是文件”! 不错,今天walfred将在快速上手linux设备驱动这一块,谈谈linu ...

  4. JavaWeb学习总结(十五)--过滤器的应用

    一.解决全站字符乱码(post和get中文编码问题) 乱码问题: 获取请求参数中的乱码问题: POST请求:request.setCharacterEncoding("utf-8" ...

  5. virtualbox中centos系统配置nat+host only上网(zhuan)

    http://www.cnblogs.com/leezhxing/p/4482659.html **************************************************** ...

  6. js获取时间格式化

    http://www.cnblogs.com/zhangpengshou/archive/2012/07/19/2599053.html

  7. maven各种插件在总结

    http://blog.csdn.net/taiyangdao/article/category/6377863  好文章系列课程

  8. maven和jdk版本不匹配

    解决方法:http://blog.csdn.net/mafan121/article/details/51944346

  9. Unity5.3官方VR教程-系列1

    如果你不是VR游戏或应用的开发者,可以选择无视下面的内容,这不是给普通用户看的~ 如果你之前曾经为Oculus Rift DK2或者Gear VR开发过,那么心里面一定曾经有千万个草泥马来回奔跑过.虽 ...

  10. selenium+python笔记1

    #!/usr/bin/env python # -*- coding: utf-8 -*- """@desc: 讲讲web项目中常用的方法属性 webdriver 提供了 ...