php文本框限制字节,js限制文本框输入长度两种限制方式(长度、字节数)

功能/特点:

1.实时显示可输入的字数(字节数)

2.两种限制方式(长度、字节数)

3.中文输入法下可正常使用,无BUG

4.同一页面可以使用多个,相互不干扰

limit.js

function limit(){

var txtNote;//文本框

var txtLimit;//提示字数的input

var limitCount;//限制的字数

var isbyte;//是否使用字节长度限制(1汉字=2字符)

var txtlength;//到达限制时,字符串的长度

var txtByte;

this.init=function(){

txtNote=this.txtNote;

txtLimit=this.txtLimit;

limitCount=this.limitCount;

isbyte=this.isbyte;

txtNote.οnkeydοwn=function(){wordsLimit()};txtNote.οnkeyup=function(){wordsLimit()};

txtLimit.value=limitCount;

}

function wordsLimit(){

var noteCount=0;

if(isbyte){noteCount=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length}else{noteCount=txtNote.value.length}

if(noteCount>limitCount){

if(isbyte){

txtNote.value=txtNote.value.substring(0,txtlength+Math.floor((limitCount-txtByte)/2));

txtByte=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length;

txtLimit.value=limitCount-txtByte;

}else{

txtNote.value=txtNote.value.substring(0,limitCount);

txtLimit.value=0;

}

}else{

txtLimit.value=limitCount-noteCount;

}

txtlength=txtNote.value.length;//记录每次输入后的长度

txtByte=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length;

}

}

页面调用:

还可输入个字符

文本框限制字符长度

上面这样写只能限制输入的一定是数字 和最大长度为11个字符 如何限制一定要输入11位 不能少也不能多

------解决方案--------------------------------------------------------

你确定上面的写法对吗。。。测试怎么通不过呢。。

不对吗 测试那里不对 这个现在只是限制输入一定是数字和11个字符

------解决方案--------------------------------------------------------

上面这样写只能限制输入的一定是数字 和最大长度为11个字符 如何限制一定要输入11位 不能少也不能多

------解决方案--------------------------------------------------------

上面这样写只能限制输入的一定是数字 和最大长度为11个字符 如何限制……

------解决方案--------------------------------------------------------

if(document.form.mobile.value=="")

{

alert("您输入错误");

document.forma.mobile.focus();

return false;

}

else

{

if(!/^\d{11}$.test(document.form.mobile.value))

{alert("您输入数字的位数不对");

document.forma.mobile.focus();

return false;

}

}

不知道这样行不行。。。

------解决方案--------------------------------------------------------

HTML code

控制textarea的字符个数

function LessThan(oTextArea){

//返回文本框字符个数是否符号要求的boolean值

return oTextArea.value.length < oTextArea.getAttribute("maxlength");

}

请输入您的姓名:

我要留言:

------解决方案--------------------------------------------------------

HTML code

电话号码检测

电话号码:

function checkPhone(){

var phone = document.getElementById("phone").value;

if(phone == ""){

alert("请输入号码");

}else if(!(/^\d{11}$/g.test(phone))){//限制输入11整数

//}else if(!(/^13\d{9}$/g.test(phone)||(/^15[0-35-9]\d{8}$/g.test(phone))|| (/^18[05-9]\d{8}$/g.test(phone)))){

//用于检测用户输入的手机号码是否正确 验证13系列和150-159(154除外)、180、185、186、187、188、189几种号码,长度11位

alert("请输入11整数");

}else{

alert("ok");

}

}

------解决方案--------------------------------------------------------

上面这样写只能限制输入的一定是数字 和最大长度为11个字符 如何限制……

这样是可以有个提示,但并没起到限制作用,,当输入少于11位 还是可以提交的,这个是不是要用js来控制的呢

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-input文本框长度可以通过给该元素加上maxlength属性来实现。比如,在普通的<input>标签中,可以使用maxlength属性限制输入文本框长度,例如<input type="text" value="我是一个输入框" maxlength="5" />。但在饿了么框架中,使用maxlength属性来设置el-input文本框长度是无效的。为了解决这个问题,可以给el-input文本框加上一个oninput属性来实现长度限制,例如<el-input type="text" oninput="if(value.length>6)value=value.slice(0,5)"></el-input>。这样,文本框输入的内容就会限制在5个字符。 然而,如果我们想限制输入的是100个字节,就需要考虑英文字符和中文字符的字节数。一个英文字符占一个字节,一个中文字符占两个字节,一个数字也是占一个字节。所以,如果输入的是英文和中文的混合体,需要计算输入输入长度。 我们可以使用以下方法来计算输入长度。首先,给el-input加上一个@change事件来触发检查输入内容的方法,例如: <el-input v-model="form.number" placeholder="请输入产品编号" @change="checkInput"></el-input>。然后,在checkInput方法中,通过遍历输入的字符串,判断其中的字符是中文还是英文,然后累加对应的字节数。最后,根据限制的最大输入长度和计算出的字节数,判断是否超过了限制,如果超过了,则截取字符串到限制长度。这样就实现了输入长度限制。 总结起来,el-input文本框长度可以通过给元素加上maxlength属性来实现,在饿了么框架中,可以使用oninput属性来实现长度限制。如果需要限制的是字节数,可以通过检查输入内容的方法来计算输入长度,并根据限制的最大输入长度进行截取。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [给 el-input 设置内容长度的方法](https://blog.csdn.net/qq_44603011/article/details/118977215)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [el-input 输入长度限制问题](https://blog.csdn.net/cm159177/article/details/118894433)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值