<!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. linux下挂载ISO像镜文件

    挂载命令(mount) 命令格式:mount [-t vfstype] [-o options] device dir其中:1.-t vfstype 指定文件系统的类型,通常不必指定.mount 会自 ...

  2. 模仿某旅行网站 纯css实现背景放大效果

    基本功能是鼠标移动到图片上,对应宽度变宽.其中布局和基本样式直接copy官网,功能部分是自己瞎鼓捣实现的. 直接上代码: HTML部分 <div class="fold_wrap&qu ...

  3. Java之聊天室系统设计一

    任务: 先上实现效果图: 登陆界面: index.jsp: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  4. 我的Android学习路线（一）

    最近实在是闲的无聊,本着不能让自己的时间白白流失的目的,我就决定完成一下之前的诺言:把 Android 开发学了.正好手头有一本<Android 4编程入门经典>,于是便用两天时间把视图部 ...

  5. spring mvc: log4j插件 log日志的输出

    准备: log插件:log4j <!-- log日志插件 --> <!-- https://mvnrepository.com/artifact/log4j/log4j --> ...

  6. Android Fragment解析（上）

    今天被人问到了什么是Fragment,真是一头雾水,虽然以前也用到过,但不知道它是叫这个名字,狂补一下. 以下内容来自互联网,原文链接:http://blog.csdn.net/lmj62356579 ...

  7. 数据挖掘之Python调用R包、函数、脚本

    Python中集成R :参考博客http://blog.csdn.net/weidelight/article/details/44946785

  8. bzoj 1798 双标记区间修改线段树

    #include<bits/stdc++.h> using namespace std; #define MAXN 100000 #define M ((L+R)>>1) #d ...

  9. JS判断键盘上的上下左右键

    document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.argumen ...

  10. HDU 4681 STRING dp+暴力。

    题意:不说了很好懂. 这题这么水= =...当时竟然没有勇气暴力搜一下.昨天(好吧前天.)比赛的时候胃疼,看到这题想了一个办法就是对每一个出现最短的C串前后连接然后对这个串求最长公共子序列.其实优化一 ...