<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>留言字数限制</title>

<style>

body{

    background:skyblue;

}

h3{

    text-align: center;

}

.text{

    width: 1200px;

    height: auto;

    margin: 10% auto;

    border: 2px solid black;

    background: #fff;

}

.wrap{

    width: 800px;

    margin: 0 auto;

}

.msg{

    width: 800px;

    height: 128px;

    resize: none;

}

ul li{

    /*-webkit-user-select:none;

    -ms-user-select:none;

    -moz-user-select:none;

    -khtml-user-select:none;*/

    user-select:none;

}

.name::-webkit-input-placeholder{

    font-size: 14px;

    color: red;

}

</style>

</head>

<body>

    <div class="text">

        <h3>留言字数限制</h3>

        <div class="wrap">

            <textarea name="" class="msg" cols="30" rows="10"></textarea>

            <p>您还能输入 <b class="num">11</b>个字符</p>

        </div>

        <ul>

            <li>这是2018年2月27日的新闻，发生在陕西西安</li>

            <li>这是2018年2月27日的新闻，发生在陕西西安</li>

            <li>这是2018年2月27日的新闻，发生在陕西西安</li>

            <li>这是2018年2月27日的新闻，发生在陕西西安</li>

        </ul>

        <input class="name" type="text" placeholder="请输入账号" />

    </div>

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

    <script>

        var oMsg = byClassName('msg')[0];

        var oNum = byClassName('num')[0];

//        compositionstart oninput compositionend

//compositionstart事件:当输入内容结束前执行的事件

//oninput    文本框事件

//compositionend: 当输入内容结束后执行的事件

        var cut = function(){

            if(this.value.length > 12){

                this.value = this.value.slice(0,12);

            }

        oNum.innerHTML = 12 - this.value.length;

        }.bind(oMsg);

//        定义是否为中文的标识

        var isInputChinese;

        oMsg.oninput = function(){

            if(!isInputChinese){

                cut();

            }

        }

        oMsg.addEventListener('compositionstart',function(){

            isInputChinese = true;

            if(!isInputChinese){

                cut();

            }

        })

        oMsg.addEventListener('compositionend',function(){

            isInputChinese = false;

            cut();

        })

    </script>

</body>

</html>

　　

 
 
common.js
//通过类名获取元素样式

function byClassName(sClassName){

    if(document.getElementByClassName){

        return document.getElementsByClassName(sClassName);

    } else {

        var result = [];

        var all = document.getElementsByTagName('*');

        for(var i = 0; i<all.length;i++){

            if(all[i].className === sClassName){

                result.push(all[i]);

            }

        }

        return result;

    }

}

　　

 
 

js之留言字数限制的更多相关文章

  1. js判断汉字字数

    js判断汉字字数的东东 //**************************************************************** //* 名 称:DataLength // ...

  2. 用js写留言信息的判断非空条件

    首先在tp上有多种方法去判断留言是否为空,但是js是最方便也是最没有冲突的. <form action="{:U('validate')}" method="pos ...

  3. js文本框字数限制

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. js 实时显示字数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Js练习题之字数判断

    目标:控制某个栏目里每行字数,当字数超出时,以省略号显示 $("元素").each(function(){ var maxlength=9; //最大字数 if($(this).t ...

  6. js：输入字数限制

    Demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  7. js简易留言板

      <!DOCTYPE html>   <html lang="en">   <head>   <meta charset="U ...

  8. js 做留言提交

    如下是留言提交源码 功能:点击按钮或点击enter键可以提交内容扩展:ctrlKey\shiftKey\altKye 可以将如上三个参数与oEvent.keyCode == 13 进行与操作可以得到 ...

  9. js制作留言板

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. SaltStack应用grains和jinja模板-第四篇

    目标需求 1.使用jinja模板让apache配置监听本地ip地址 2.了解grains的基本使用方法 说明:实验环境是在前面的第二篇和第三篇基础上完成 实现步骤 使用grains获取ip地址信息 使 ...

  2. selenium webdriver模拟鼠标键盘

    在测试使用Selenium webdriver测试WEB系统的时候,用到了模拟鼠标.键盘的一些输入操作. 1.鼠标的左键点击.双击.拖拽.右键点击等: 2.键盘的回车.回退.空格.ctrl.alt.s ...

  3. Docker pull网络错误

    [root@Oracle ~]# docker search centos Error response from daemon: Get https://index.docker.io/v1/sea ...

  4. linux下如何使用自己安装的SunJDK替换默认的OpenJDK

    在linux系统中,由于涉及到版权问题,在大部分linux系统的发行版本中,默认都安装了OpenJDK,并且OpenJDK的java命令也已经加入到环境变量中了. 在刚装好的linux系统中,运行ja ...

  5. Permission denied: mod_fcgid

    [Tue Jun 16 13:29:08 2015] [warn] (13)Permission denied: mod_fcgid: spawn process /var/www/cgi-bin/g ...

  6. scala中的高阶函数

    版权申明:转载请注明出处. 文章来源:http://bigdataer.net/?p=332 排版乱?请移步原文获得更好阅读体验 1.scala中的函数 scala是一门面向对象和函数式编程相结合的语 ...

  7. 数据结构实习 Problem H 迷宫的最短路径

    数据结构实习 Problem H 迷宫的最短路径 题目描述 设计一个算法找一条从迷宫入口到出口的最短路径. 输入 迷宫的行和列m n 迷宫的布局 输出 最短路径 样例输入 6 8 0 1 1 1 0 ...

  8. UOJ34 多项式乘法（NTT）

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  9. ZJOI2017游记

    $Day$ $-1$ 听说可以去$ZJOI2017$打酱油,终于可以出去走走辣$QAQ$... 上次出去打比赛似乎是$PKUSC$?? 好吧,至少可以一览国家预备队爷们的风采... 准备把膝盖留在浙江 ...

  10. codeforces208E Blood Cousins

    题目链接:codeforces208E 正解:$dsu$ $on$ $tree$ 解题报告: 又是一波$dsu$ $on$ $tree$咯… $p$级$cousin$其实就是对于$x$的$p$级祖先统 ...