js之留言字数限制
<!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>
//通过类名获取元素样式
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之留言字数限制的更多相关文章
- js判断汉字字数
js判断汉字字数的东东 //**************************************************************** //* 名 称:DataLength // ...
- 用js写留言信息的判断非空条件
首先在tp上有多种方法去判断留言是否为空,但是js是最方便也是最没有冲突的. <form action="{:U('validate')}" method="pos ...
- js文本框字数限制
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js 实时显示字数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Js练习题之字数判断
目标:控制某个栏目里每行字数,当字数超出时,以省略号显示 $("元素").each(function(){ var maxlength=9; //最大字数 if($(this).t ...
- js:输入字数限制
Demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- js简易留言板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- js 做留言提交
如下是留言提交源码 功能:点击按钮或点击enter键可以提交内容扩展:ctrlKey\shiftKey\altKye 可以将如上三个参数与oEvent.keyCode == 13 进行与操作可以得到 ...
- js制作留言板
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- python sort dict 总结
python中的dict是不能排序的,只有对dict的representation进行排序,例如list或者tuple 排序肯定会用到sorted函数,那么我们就来讲一下sorted函数. sorte ...
- mybatis的操作数据库基础
1.domain类 package com.xiaostudy.mybatis.domain; /** * @desc domain类 * @author xiaostudy * */ public ...
- 解题报告:poj2689 Prime Distance
2017-10-03 11:29:20 writer:pprp 来源:kuangbin模板 从已经筛选好的素数中筛选出规定区间的素数 /* *prime DIstance *给出一个区间[L,U],找 ...
- has~和belongsTo的区别?
在某一个class里面,class_name所对应的表为主表(父), 关系函数方法里面的第一个参数所对应的表为从属表(子), 即为与主表相关联的表. $has~ 1.外键保存在关联表中: 2.保存时 ...
- Android开发-ADT Bundle安装
此次安装是在Android Studio的机器上.安装Eclipse是因为目前很多Android程序是Eclipse开发的,要想快速看到运行效果就是安装Eclipse. 1.所有的资源都在:http: ...
- 记录一下我的mac的环境变量的配置参数
#配置jdk环境export JAVA_7_HOME=/Library/java/JavaVirtualMachines/jdk1.7.0_79.jdk/Contents/Homeexport JAV ...
- 安装 python 数据分析插件 pandas
一上午试验了各种方法,发现利用pycharm是最快的.可以抛弃版本,命令和兼容问题的烦恼.纯粹傻瓜式 方法是 pycharm, 直接在settings里面,搜索pandas,添加即可,他会把所有之前需 ...
- 解决maven项目Cannot change version of project facet Dynamic web module to 3.0/3.1
解决maven项目Cannot change version of project facet Dynamic web module to 3.0 1.打开项目所在目录下的.settings文件夹 打 ...
- IdentityServer4在Asp.Net Core中的应用(二)
继续上次授权的内容,客户端模式后我们再说以下密码模式,先回顾下密码模式的流程: 我们还是使用上次的代码,在那基础上修改,在IdentityServer4里面有一个IdentityServer4.Tes ...
- fio测试freenas共享的iscsi磁盘性能
4k随机读iops: fio -ioengine=libaio -bs=4k -direct=1 -thread -rw=randread -filename=/dev/sdb -iodepth=32 ...