[原生 js 训练计划] 限制字符串的长度

最新推荐文章于 2023-04-10 17:39:17 发布

Gavincoder

最新推荐文章于 2023-04-10 17:39:17 发布

阅读量478

点赞数

分类专栏：原生 js 训练计划大前端 Javascript

本文链接：https://blog.csdn.net/weixin_39200308/article/details/96100886

版权

大前端同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

Javascript

28 篇文章 0 订阅

订阅专栏

原生 js 训练计划

8 篇文章 0 订阅

订阅专栏

欢迎大家加入我的github项目,一起学习，一起发展

---> 全栈工程师进阶学习站
---> 我的前端学习笔记
--->行业内最新最群的报告，工作日每日更新

—>原生 js 训练计划

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>限制字符串的长度</title>
</head>

<body>
    <h2>限制字符串的长度</h2>
    <p>1.通过 input 自带的 maxlength 来限制</p>
    <input type="text" maxlength="5" placeholder="只能输入五个字符">
    <p>2.通过 js 事件来限制</p>
    <input type="text" data-length="5" placeholder="只能输入五个字符" id="control">
    <!-- 这边写的 data-length 是自定义属性 -->
</body>
<script>
    window.onload = function () {
        var control = document.getElementById("control");
        var clearMore = function (_this) {
            //这个是写在 input 中的长度限制规定
            const dataLength = _this.getAttribute("data-length");
            //获取输入字符串
            var this_value = _this.value;
            //获取字符串长度
            var this_length = this_value.length;
            //判断长度是否超标,如果超标,截取字符串
            if (this_length > dataLength) {
                //并赋值给原 value
               _this.value= this_value.substr(0, dataLength);
            }


        }
        //正常三大监听事件,获取焦点事件,键盘弹起事件,失去焦点事件

        control.onfocus = function () {
           clearMore(this);
        }
        control.onkeyup = function () {
            clearMore(this);
        }
        control.onblur = function () {
           clearMore(this)
        }


    }


</script>

</html>

```闲聊时刻

10年短信公司，互联网100强企业！主营业务：短信（国内和国际）App H5一键免密登录，防薅羊毛接口，图片OCR，空号检测，活跃号检测，人证核验，活体检测，高防ddos攻击等等200多个企业服务接口！需要的联系他13592366783 官方链接：https://zz.253.com/v5.html#/register?uid=1953

自己公司需求偶然间用了一家第三方接口供应商，产品应有尽有，很齐全，对接文档非常详细，彼此都很节约时间，主要非常稳定，包括服务方面很给力，有兴趣的博友，可以联系他，算是对合作伙伴的支持了

Gavincoder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[原生 js 训练计划] 限制字符串的长度

欢迎大家加入我的github项目,一起学习，一起发展--->全栈工程师进阶学习站--->我的前端学习笔记--->行业内最新最群的报告，工作日每日更新 —>原生 js 训练计划<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫