<!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. centos 查询mysql配置文件位置

    具体指令: 1.which mysqld  (”which 文件名“ : 搜索命令所在路径及别名) 2./usr/sbin/mysqld --verbose --help | grep -A 1 'D ...

  2. PAT1070. Mooncake (25)

    #include #include #include <stdio.h> #include <math.h> using namespace std; struct SS{ d ...

  3. 秒懂算法1——冒泡排序,及一种小改进(C#实现)

    算法思路: 重复走访每两个相邻元素,比较大小交换位置,直至排序完成. 有兴趣电话可以看一下这个[冒泡排序踢踏舞]的视频,很形象的演示了排序过程,额呵呵~~ 性质: 冒泡排序是一种原地排序(只有常数个元 ...

  4. Centos中使用Jenkins执行gulp命令:command not found

    在Centos操作系统,使用Jenkins的pipeline执行发布流程:jenkinsfile如下: stage("前端项目构架gulp") { steps { dir('src ...

  5. cocos2d-x入门二 helloworld实例运行与创建

    本机环境:win7+VS2012+python2.7.8+cocos2d-x-3.8,另外本机已经配置android开发环境(java+eclipse+SDK+ADT),针对环境搭建后续会有一篇详细说 ...

  6. vue2.0--vue-router路由

    一.vue-router如何进行参数传递 1.name  $route.name 通过在路由router/index.js中配置路由时定义的name属性来传递 ① 有一个页面components/he ...

  7. springboot项目属性配置及注意事项

    在idea编辑器建的springboot项目中的resources包下的application.properties这个就是配置文件. 另外配置文件的文件名还可以是application.yml,在r ...

  8. 使用@media screen解决移动web开发的多分辨率问题

    当今移动设备的发展已经越来越迅速,移动web开发的需求也越来越多多.许多大平台.大门户都纷纷推出了自己的移动web版网站. 随着移动设备飞速的发展,移动产品的屏幕规格越来越多.从几年前的320×240 ...

  9. [Vue]组件——插槽:slot(匿名插槽,具名插槽)与slot-scope(作用域插槽)

    1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...

  10. SQLServer 2005 和自增长主键identity说再见——NEWSEQUENTIALID()

    ``code 在SQLServer2005环境下,表的主键应该怎样设计. 目前主要用到的主键方案共三种 自动增长主键 手动增长主键 UNIQUEIDENTIFIER主键 1.先说自动增长主键,它的优点 ...