有时我们需要在点击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. iOS - UIToolbar

    前言 NS_CLASS_AVAILABLE_IOS(2_0) __TVOS_PROHIBITED @interface UIToolbar : UIView <UIBarPositioning& ...

  2. JavaScript基于对象(面向对象)<一>类和对象

    javascript中一切皆对象,比如:Array,Date.....这些都是对象.javascript中没有class的定义,function既是定义函数,也可以是定义类.function Obj( ...

  3. LCD控制器与驱动器

    这回我再讲讲从 MCU 到 LCD 之间是怎样一个控制流程,即我们的位图数据是怎样显示到 LCD 上的.前面我们了解到 LCD 显示是用动态扫描的方式来实现的,每次显示一整行,在一帧里每行一次扫描一遍 ...

  4. js打印出对象的方法

    var description = ""; for (var i in order) { var property = order[i]; description += i + & ...

  5. Javascript链式调用案例

    jQuery用的就是链式调用.像一条连接一样调用方法. 链式调用的核心就是return this;,每个方法都返回对象本身. 下面是简单的模拟jQuery的代码, <script> win ...

  6. Service 与 Thread 的区别

    很多时候,你可能会问,为什么要用 Service,而不用 Thread 呢,因为用 Thread 是很方便的,比起 Service 也方便多了,下面我详细的来解释一下. 1). Thread:Thre ...

  7. javascript的执行顺序（转载）

    之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥 ...

  8. JS重要知识点(转载 学习中。。。)

    这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原 ...

  9. CSS3_概述、发展史、模块介绍、与浏览器之间的关系

    一.CSS3概述和CSS3的发展史: 1.css3概述: CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能.    目前主流浏览器chrome.safari. ...

  10. WCF配置详解

    前面一篇文章<WCF 学习总结1 -- 简单实例> 一股脑儿展示了几种WCF部署方式,其中配置文件(App.config/Web.config)都是IDE自动生成,省去了我们不少功夫.现在 ...