【代码段】原生js限制 input/textarea 区域文字+字符长度

需要在限制字符长度的标签中加入 事件οnkeyup=”subCharStr(this,400)”//400表示400个字符 200个汉字 eg:

<input  onkeyup="subCharStr(this,400)"  />
....
<textarea  onkeyup="subCharStr(this,400)" />

输入超过字符长度的内容的时候 自动删除超出部分

function fucCheckLength(strTemp) {
    var i, sum;
    sum = 0;
    for (i = 0; i < strTemp.length; i++) {
        if ((strTemp.charCodeAt(i) >= 0) && (strTemp.charCodeAt(i) <= 255)) {
            sum = sum + 1;
        } else {
            sum = sum + 2;
        }
    }
    return sum;
}
function subCharStr(e,n) {
    var str = e.value;
    var _len = fucCheckLength(str);
    if (_len > n) {
        var _newLen = Math.floor(n / 2);
        var _strLen = str.length;
        var _newStr = "";
        for (var i = _newLen; i <= _strLen; i++) {
            var tmpStr = str.substr(0, i);
            if (fucCheckLength(tmpStr) > n) {
                // alert("请输入少于xxx个汉字或者xxx个字符内容")
                e.value=_newStr
                return _newStr;
                break;
            } else {
                _newStr = tmpStr;
            }
        }
    } else {
        e.value=str
        return str;
    }
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui 弹窗示例</title> <!-- 引入 Layui 样式 --> <link href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" rel="stylesheet"> <style> .modal-title { color: #333333; font-family: Microsoft YaHei; font-weight: bold; font-size: 28px; line-height: normal; letter-spacing: 0px; text-align: center; } .modal-tip { color: #333333; font-family: Microsoft YaHei; font-weight: regular; font-size: 16px; line-height: 30px; letter-spacing: 0px; text-align: center; } .layui-input-block{ margin-left: 0; width: 76%; margin: auto; } .layui-textarea { margin-top: 20px; height: 150px !important; } </style> </head> <body style="padding: 20px;"> <!-- 触发按钮 --> <button class="layui-btn" id="showDialog"> <i class="layui-icon"></i> 显示弹窗 </button> <!-- 引入 Layui JS --> <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script> <script> // 初始化 Layui 模块 layui.use(['layer', 'form'], function(){ var layer = layui.layer; var form = layui.form; // 绑定按钮点击事件 document.getElementById('showDialog').onclick = function(){ // 基础弹窗 layer.open({ type: 1, title: '弹窗标题', area: ['900px', '600px'], content: '<div style="padding:20px;">' + ' <p class="modal-title">中午好,流云!</p>' + ' <p class="modal-tip">输入您的内容主题,让AI为你服务</p>' + ' <form class="layui-form" lay-filter="formDemo">' + ' <div class="layui-form-item">' + ' <div class="layui-input-block">' + ' <textarea name="content" placeholder="发消息、输入@选择技能或选择文件" class="layui-textarea"></textarea>' + ' </div>' + ' </div>' + ' </form>' + '</div>', btn: ['提交', '取消'], success: function(layero, index){ // 重新渲染表单 form.render(); // 监听提交按钮 form.on('submit(formDemo)', function(data){ layer.msg('提交内容:' + JSON.stringify(data.field)); return false; }); }, yes: function(index, layero){ // 手动触发表单提交 var formElem = $(layero).find('form'); formElem.find('button[lay-submit]').click(); }, btn2: function(index, layero){ layer.close(index); } }); }; }); </script> </body> </html>
最新发布
03-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值