该案例实现如下效果，具体可见新浪微博网站的微博发布框

实现 以下效果
效果1：当光标移入文本框时，文本框上方的文字发生变化，显示剩余可以输入的字数，当光标移出文本框，并且文本框中没有任何输入时，恢复最初默认的文字

效果2：文本输入的时候，文本框提示剩余文本数，剩余文本字数随着输入字数而减少,两个字母算一个字，一个汉字算一个字

效果3:当输入框为空，或者输入框内的文本超过140个字的时候，发布按钮不可用，否则可用；在发布按钮不可用的情况下点击发布按钮，文本框会出现红色背景，并闪动两次

对应的html代码：

<!DOCTYPE html>

<html lang="zh_CN">

<head>

    <meta charset="UTF-8">

    <title>微博发布框效果</title>

    <style>

        body{font-size: 12px}

        div{width:400px;margin:20px auto;}

        div p{float:right; }

        div textarea{width:%;height:150px;}

        div a{float:right;padding:10px 20px;font-size: 16px;background:#0f0;color:#fff;}

        div a.disable{background: #ccc;color:#;}

    </style>

</head>

<body>

    <div id="div1">

        <p>他们都在读什么？企业#大咖私藏书单#，领导者的思想盛宴　</p>

        <textarea name="" id=""  ></textarea>

        <a href="#" class="disable">发布</a>

    </div>

    <script src="js/weiboInput.js"></script>

</body>

</html>

微博发布框html代码

对应的javascript代码：

//实现 以下效果

//效果1：当光标移入文本框时，文本框上方的文字发生变化，显示剩余可以输入的字数

//当光标移出文本框，并且文本框中没有任何输入时，恢复最初默认的文字

//效果2：文本输入的时候，文本框提示剩余文本数，剩余文本字数随着输入字数而减少,两个字母算一个字，一个汉字算一个字

//效果3:当输入框为空，或者输入框内的文本超过140个字的时候，发布按钮不可用，否则可用；在发布按钮不可用的情况下点击发布按钮，文本框会出现红色背景，并闪动两次

document.addEventListener('DOMContentLoaded', function() {

    var oDiv = document.getElementById('div1');

    var oP = oDiv.getElementsByTagName('p')[];

    var oT = oDiv.getElementsByTagName('textarea')[];

    var oA = oDiv.getElementsByTagName('a')[];

    //实现效果1

    oT.addEventListener('focus', function() {

        oP.innerHTML = "还可以输入<span>140</span>个字";

    }, false);

    oT.addEventListener('blur', function() {

        if (!this.value) {

            oP.innerHTML = "他们都在读什么？企业#大咖私藏书单#，领导者的思想盛宴";

        }

    }, false);

    //实现效果2,连续输入在标准下触发的是input事件，在ie中触发的是onproperty事件

    oT.addEventListener('input', function() {

        var oS = oDiv.getElementsByTagName('span')[];

        var curLength = Math.ceil(getLength(oT.value) / );

        if (curLength <= ) {

            oS.innerHTML =  - curLength;

        } else {

            oS.innerHTML = curLength - ;

            oS.style.color = 'red';

        }

        if (curLength <=  || curLength > ) {

            oA.className = 'disable';

        } else {

            oA.className = '';

        }

    }, false);

    function getLength(str) {

        return str.replace(/[^\x00-\xff]/g, 'aa').length;

    }

    //实现效果3

    oA.addEventListener('click', function() {

        var timer;

        var num = ;

        if (oA.className === 'disable') {

            //文本框的背景变成红色并且闪动两次

            // clearInterval(timer);

            // timer = setInterval(function() {

            //     num++;

            //     if (num == 4) {

            //         clearInterval(timer);

            //         num = 0;

            //     }

            //     if (num % 2) {

            //         oT.style.background = 'pink';

            //     } else {

            //         oT.style.background = '';

            //     }

            // }, 150);

            //尝试利用超时调用来模拟间歇调用

            clearTimeout(timer);

            function changeBgColor() {

                num++;

                if (num >= ) {

                    clearTimeout(timer);

                    num=;

                    return;

                }

                if (num % ) {

                    oT.style.background = 'pink';

                } else {

                    oT.style.background = '';

                }

                timer = setTimeout(changeBgColor, );

            }

            timer = setTimeout(changeBgColor, );

        } else {

            alert('微博已发布！');

        }

    }, false);

}, false);

微博发布框javascript代码

收获：

1.背景闪动！联系动画！

2.文本框连续输入事件，ie下是onpropertychange,标准下是input

javascript实例学习之二——类新浪微博的输入框的更多相关文章

  1. 如何对Javascript代码进行二次压缩（混淆）

    如何对Javascript代码进行二次压缩(混淆) 对Javascript代码进行压缩(混淆),可以有效减少传输和加载时间.但是,不是所有的变量(方法)都能被混淆的,一般来说,只有非属性的变量(方法) ...

  2. JavaScript基础笔记二

    一.函数返回值1.什么是函数返回值    函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...

  3. JavaScript基本概念(二)

    JavaScript 基本概念(二) 操作符和语句 目录 操作符 一元操作符 位操作符 布尔操作符 乘性操作符 其他操作符 语句部分 说起操作符,回忆下上一篇文章末尾说的话. 操作符 一元操作符 ++ ...

  4. 前端笔记之JavaScript面向对象（二）内置构造函数&相关方法|属性|运算符&继承&面向对象

    一.复习 1.1复习上下文 函数的调用方式 上下文 fun() window obj.fun() obj box.onclick = fun box setInterval(fun,1000) set ...

  5. JavaScript学习记录二

    title: JavaScript学习记录二 toc: true date: 2018-09-13 10:14:53 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  6. 深入JavaScript对象(Object)与类(class)，详细了解类、原型

    JavaScript基于原型的对象机制 JavaScript原型上的哪些事 一.JavaScript基于原型的对象机制 JavaScript对象是基于原型的面向对象机制.在一定程度上js基于原型的对象 ...

  7. JavaScript 入门教程二 在HTML中使用 JavaScript

    一.使用 <script> 元素的方式有两种:直接在页面中嵌入 JavaScript 代码和引用外部 JavaScript 文件. 二.使用内嵌方式,一般写法为: <script t ...

  8. JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  9. 一些有用的javascript实例分析(二)

    原文:一些有用的javascript实例分析(二) 5 求出数组中所有数字的和 window.onload = function () { var oBtn = document.getElement ...

随机推荐

  1. OpenCV学习笔记——多种Smooth平滑处理

    opencv库提供了好几种模糊平滑Smooth操作的类型作为cvSmooth的参数传入,从而达到不同的平滑效果,另外复习了一下如何复制一份图像和重新调整图像大小. 调整图像大小目前是按照一下步骤进行: ...

  2. Responsive布局技巧

    在Responsive布局中,可以毫无保留的丢弃: 第一, 尽量少用无关紧要的div: 第二,不要使用内联元素(inline): 第三,尽量少用JS或flash: 第四,丢弃没用的绝对定位和浮动样式: ...

  3. SwfUpload学习记录

    参考资料: SWFUpload 2.5.0版 官方说明文档 中文翻译版 了解SWFUpload 多文件上传配置详解 WEB版一次选择多个文件进行批量上传(swfupload)的解决方案 jQuery轻 ...

  4. mysql 导入导出.sql文件

    备份数据库(包含全部表和全部存储过程):C:\Documents and Settings\Administrator>mysqldump -h localhost -u root -p -R ...

  5. Bootstrap页面布局22 - BS工具提示

    当鼠标点击在一个a连接上时,显示提示文字的效果 ----------------  tooltip <div class='container-fluid'> <h3 class=' ...

  6. thinkPhp 3.1.3的验证码无法显示的问题

    Image帮助类的output方法中,在下面的代码 header("Content-type: image/" . $type); 前增加代码: ob_end_clean();

  7. javaWeb总结——session

    一.session简单介绍 在web开发中,服务器为每个用户浏览器创建一个会话对象,即session对象.一个浏览器独占一个session对象.因此,在需要保护用户数据时,服务器程序可以把用户数据写到 ...

  8. 【转】四元数（Quaternion）和旋转

    四元数介绍 旋转,应该是三种坐标变换--缩放.旋转和平移,中最复杂的一种了.大家应该都听过,有一种旋转的表示方法叫四元数.按照我们的习惯,我们更加熟悉的是另外两种旋转的表示方法--矩阵旋转和欧拉旋转. ...

  9. 软件的NABCD----安装部分

    N:需求 有些软件安装需要很多的插件,很很多的安装步骤,甚至文件夹移动等麻烦的步骤 A:做法 做成一键安装的程序 B:好处 默认D盘安装,节省C盘空间,没有赘余插件,一键安装,省时省力. C:竞争 和 ...

  10. sublime修改TAB缩进

    菜单:Preferences ->Settings – User 添加配置信息: "tab_size": 4, "translate_tabs_to_spaces& ...