php前台限制输入text字符,限制字符输入数功能(jquery版和原生JS版)
比较常用的限制字符输入数功能(比如热火超天的微博输入框),用jquery和原生JavaScript分别写了一个.原生JavaScript注释中有区分中英文字符的函数, 但个人并不建议这么做.
已知BUG:
Ubuntu系统下, onkeyup事件失效,详见: Ubuntu系统下onkeyup/onkeydown对中文输入失效bug.
查看演示: 点此查看DEMO
核心代码:
复制代码 代码如下:
//原生JavaScript版本
window.οnlοad=function(){
var js=document.getElementById('js');//获取文本域
var info=document.getElementsByTagName('p')[0];//获取要插入提示信息的元素
var submit=info.getElementsByTagName('input')[0];//获取提交按钮
var max=js.getAttribute('maxlength');//获取限制输入的最大长度
var tips=document.createElement('span');//新建一个提示span
var val,cur,count,warn;
submit.disabled=true;//默认不可提交
tips.innerHTML='你还可以输入'+max+'个字符[不区分中英文字符数]';
if(max){
js.οnkeyup=js.οnchange=function(){
submit.disabled=false;
if(info.lastChild.nodeName!='SPAN') info.appendChild(tips);//避免每次弹起都会插入一条提示信息
count=info.getElementsByTagName('em')[0];//根据输入数字变换区
warn=info.getElementsByTagName('font')[0];//副标题
val=this.value;
cur=val.length;
// for(var i=0;i
// if(val.charCodeAt(i)>255) cur+=1;
// }
if(cur==0){ //当默认值长度为0时,可输入数为默认maxlength值,此时不可提交
count.innerHTML = max;
submit.disabled=true;
warn.innerHTML='不区分中英文字符数';
}else if (cur < max) {//当默认值小于限制数时,可输入数为max-cur
count.innerHTML = max - cur;
warn.innerHTML='不区分中英文字符数';
}else{
count.innerHTML = 0;//当默认值大于等于限制数时,插入一条提示信息并截取限制数内的值
warn.innerHTML='不可再输入!';
this.value=val.substring(0,max);//此处前面的this.value不能用变量val,它们不再是同一个值
}
}
}
}
//基于jQuery版本
$(function(){
var _area=$('textarea#jq');
var _info=_area.next();
var _submit=_info.find(':submit');
var _max=_area.attr('maxlength');
var _val,_cur,_count,_warn;
_submit.attr('disabled',true);
_area.bind('keyup change',function(){ //绑定keyup和change事件
_submit.attr('disabled',false);
if(_info.find('span').size()<1){//避免每次弹起都会插入一条提示信息
_info.append('你还可以输入'+ _max +'个字符[不区分中英文字符数]');
}
_val=$(this).val();
_cur=_val.length;
_count=_info.find('em');
_warn=_info.find('font');
if(_cur==0){//当默认值长度为0时,可输入数为默认maxlength值,此时不可提交
_count.text(_max);
_submit.attr('disabled',true);
}else if(_cur<_max>
_count.text(_max-_cur);
_warn.text('不区分中英文字符数');
}else{//当默认值大于等于限制数时,插入一条提示信息并截取限制数内的值
_count.text(0);
_warn.text('不可再输入!');
$(this).val(_val.substring(0,_max));
}
});
});
在线测试代码:
限制字符输入数功能(jQ版和原生JS版)@Mr.Think
Mr.Think的个人博客
@专注前端技术,热爱PHP,崇尚简单生活.
返回文章页:限制字符输入数功能(jQ版和原生JS版)@Mr.Think
原生JavaScript版本
» 我是用来隔行的,别理我^-^
基于jQuery版本
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
php前台限制输入text字符,限制字符输入数功能(jquery版和原生JS版)相关推荐
- 限制字符输入数功能(jQ版和原生JS版)
限制字符输入数功能(jQ版和原生JS版) 比较常用的限制字符输入数功能(比如热火超天的微博输入框),用jQuery和原生JavaScript分别写了一个.原生JavaScript注释中有区分中英文字符 ...
- C语言字符输入回车时停止,解决C语言输入单个字符屏蔽回车符的问题
C语言的scanf()函数在接收输入单个字符时会把上一次输入的回车符号当做这次输入的字符,造成无法正确的输入字符数据.这恐怕是初学C的童鞋门遇到的最头疼的问题了. 今天给大家提供四种解决方法供借鉴. ...
- 正则表达式——WPF输入控件TextBox 限定输入特定字符
正则表达式--WPF输入控件TextBox 限定输入特定字符 原文:正则表达式--WPF输入控件TextBox 限定输入特定字符 概念: 正则表达式是对字符串操作的一种逻辑公式, 就是用事先定义好的一 ...
- java字节输入与字符输入_Java中的字节输入出流和字符输入输出流
Java中的字节输入出流和字符输入输出流 下面哪个流类属于面向字符的输入流( ) A BufferedWriter B FileInputStream C ObjectInputStream D In ...
- 从键盘输入一个字符,判断其是不是大写字母,如果是则请输出这个大写字母,如果不是请输出“这不是一个大写字母”的英文信息(要求:能连续输出直到输出“#”结束)。
从键盘输入一个字符,判断其是不是大写字母,如果是则请输出这个大写字母,如果不是请输出"这不是一个大写字母"的英文信息(要求:能连续输出直到输出"#"结束). P ...
- iOS UItextView监听输入特定字符跳转页面选择选项返回
今天有朋友问我一个需求的实现,于是自己写了一个Demo简单的实现了一下: 需求是: 1>比如: 检测用户输入"A"字符串,跳转页面选择选项,将选择的选项放置textView里 ...
- 【C#基础】输入一个字符,判定它是什么类型的字符(大写字母,小写字母,数字或者其它字符)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 网页设计作业使用Dreamweaver输入空格字符快捷键
同学们在完成网页设计作业时,经常需要输入空格,大家都指定html空格字符是 若是是一个一个字母字符输入很慢,在Dreamweaver软件中有没有html空格字符快捷键呢? 不管是苹果电脑还是WIN系 ...
- Java中的字节输入出流和字符输入输出流
Java中的字节输入出流和字符输入输出流 下面哪个流类属于面向字符的输入流( ) A BufferedWriter B FileInputStream C ObjectInputStream D ...
最新文章
- Bootstrap部分---环境安装及一个可视化的布局;
- 【夸QT十一】外来物品:通用脚本帮助Web运行基础Linux命令
- 【Python基础】Python中必须知道的5对魔术方法
- Dubbo 跨语言调用神兽:dubbo-go-pixiu
- C# WPF:初识布局容器
- android 虚拟键盘改变单个按键颜色_这款机械键盘很特别!一亿次按键寿命还有高颜值...
- 【Python3网络爬虫开发实战】1.7.2-mitmproxy的安装
- 遥感软件envi5.31
- 手撸CAPL(二)——OSEK网络管理N个节点建环机制(包含节点建环/丢失/跳过等)代码自取
- 软件工程的6个阶段以及成果精简版
- 技术移民必看:工程师应该如何获得美国签证?
- 以太坊为什么又要进行“缪尔冰川”硬分叉?
- (重点)微服务核心研究之--编排
- android 开机动画实现,Android App启动画面实现
- 系统调用的概念及原理
- 读科研经费陷“无底黑洞”有感
- 退出计算机控制如何恢复,在您退出大势至U盘禁用软件、电脑U口屏蔽软件之后如何取消U盘写保护功能、恢复向U盘复制文件的功能?...
- STC12C5A60S2串口通信(使用独立波特率发生器)
- idea2018激活方式
- 计算机桌面颜色异常怎样修复,电脑显示器变色怎么办?显示器颜色异常的原因及解决方法...