前端开发js面向对象_抽象封装继承

前端开发就业情况|web前端开发实例|安卓开发 前端是干嘛的

要求:
如示例图上方,实现一个tag输入框
要求遇到用户输入空格,逗号,回车时,都自动把当前输入的内容作为一个tag放在输入框下面。
Tag不能有重复的,遇到重复输入的Tag,自动忽视。
每个Tag请做trim处理
最多允许10个Tag,多于10个时,按照录入的先后顺序,把最前面的删掉
当鼠标悬停在tag上时,tag前增加删除二字,点击tag可删除
如示例图下方,实现一个兴趣爱好输入的功能
通过一个Textarea进行兴趣爱好的输入,可以通过用回车,逗号(全角半角均可),顿号,空格(全角半角、Tab等均可)等符号作为间隔。
当点击“确认兴趣爱好”的按钮时,将textarea中的输入按照你设定的间隔符,拆解成一个个的爱好,显示在textarea下方
爱好不能重复,所以在下方呈现前,需要做一个去重
每个爱好内容需要做trim处理
最多允许10个兴趣爱好,多于10个时,按照录入的先后顺序,把最前面的删掉

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>hr如何看前端开发:表单输入</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .arrcontent {
            margin-top: 10px;
            vertical-align: bottom;
            min-height: 50px;
            margin-bottom: 10px;
        }
        .arrcontent>span {
            height: 50px;
            background: #f00;
            min-width: 50px;
            text-align: center;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            margin-right: 10px;
            vertical-align: bottom;
            position: relative;
            border-radius: 5px;
            line-height: 50px;
            font-size: 14px;
            padding: 0 5px;
            margin-bottom: 10px;
        }
        .arrcontent>span>em {
            position: absolute;
            left: 50%;
            bottom: -30px;
            width: 50px;
            height: 20px;
            background: #fff;
            border: 1px #02b875 solid;
            color: #222;
            font-style: normal;
            font-weight: normal;
            font-size: 12px;
            margin-left: -35px;
            line-height: 20px;
            padding: 0 10px;
        }
        .wrap {
            width: 580px;
            margin: 0 auto;
            margin-top: 50px;
        }
        input {
            width: 320px;
        }
        input,
        textarea {
            width: 320px;
            border: 1px #ddd solid;
            height: 20px;
            border-radius: 5px;
            padding: 10px;
        }
        textarea {
            height: 150px;
        }
        #likeBtn {
            background: #2a6496;
            padding: 5px 10px;
            border-radius: 5px;
            width: 60px;
            text-align: center;
            height: 35px;
            line-height: 35px;
            color: #fff;
            font-size: 12px;
            margin: 0 auto;
            cursor: pointer;
            margin-top: 10px;
        }
        .btn_wrap {
            width: 320px;
        }
    </style>
</head>
<body>
    <div class=”wrap”>
        <div>
            <div style=”margin-bottom:10px”>tag:</div>
            <input id=”tag” type=”text” placeholder=”输入标签” />
        </div>
        <div class=”arrcontent” id=”tagContent”></div>
        <textarea id=”char” name=”” id=”” cols=”30″ rows=”10″></textarea>
        <div class=”btn_wrap”>
            <div id=”likeBtn”>添加爱好</div>
        </div>
        <div class=”arrcontent” id=”likeContent”></div>
    </div>
    <script>
        //对数组去重//去空格
        Array.prototype.unique = function () {
            var res = [];
            var json = {};
            for (var i = 0; i < this.length; i++) {
                if (!json[this[i]] && this[i] != “”) {
                    res.push(this[i]);
                    json[this[i]] = 1;
                }
            }
            return res;
        };
        function inputPar(ele) {
            //默认数组
            this.arr = []; //当前存入的值
            this.Allarr = [];
            this.ele = ele;
            //去空格 私有方法
            var trim = function (str) {
                return str.replace(/(^\s*)|(\s*$)/g, ”);
            }
            //对输入的信息进行验证
            this.regString = function () {
                if (this.Texts == “” || this.Texts == null) {
                    //alert(“输入的内容不能为空”)
                    this.arr = []; //当前存入的值
                    return false;
                } else {
                    var array = this.Texts.split(/[,,、 \n\t\r]+/); //把输入的内容进行分割
                    array = array.unique(); //去重,去空
                    this.arr = [];
                    if (this.Allarr.length > 0) {
                        for (var i = 0; i < array.length; i++) {
                            var flage = false;
                            for (var j = 0; j < this.Allarr.length; j++) {
                                if (array[i] == this.Allarr[j]) {
                                    flage = true;
                                }
                            }
                            if (!flage) {
                                this.arr.push(array[i]);
                            }
                        }
                    } else {
                        for (var i = 0; i < array.length; i++) {
                            this.arr.push(array[i]);
                        }
                    }
                }
            }
            //插入
            this.chaRu = function (inputText) {
                this.Texts = inputText;
                this.regString();
                if (!this.arr[0] || this.arr[0] == null) {
                    return false;
                }
                console.log(this.arr);
                for (var i = 0; i < this.arr.length; i++) {
                    this.Allarr.push(this.arr[i]);
                }
                if (this.Allarr.length > 10) {
                    this.Allarr = this.Allarr.slice(this.Allarr.length – 10, this.Allarr.length);
                }
                console.log(“this.Allarr” + this.Allarr)
                //执行渲染
                this.render();
            }
            //渲染
            this.render = function () {
                //ele 传入的插入div
                var html = “”;
                var htmlContent = “<span>{num}</span>”;
                for (var i = 0; i < this.Allarr.length; i++) {
                    html += htmlContent.replace(“{num}”, this.Allarr[i]);
                }
                this.ele.innerHTML = html;
            }
        }
        //tag 继承inputPar
        function tagInput(ele) {
            inputPar.call(this, ele); //继承父层
            //划过显示删除文字
            this.hoverTag = function () {
                var span = this.ele.getElementsByTagName(‘span’);
                var em = document.createElement(’em’);
                em.innerHTML = ‘点击删除’;
                for (var i = 0; i < span.length; i++) {
                    (function (i) {
                        span[i].addEventListener(‘mouseenter’, function (e) {
                            span[i].appendChild(em);
                        })
                        span[i].addEventListener(‘mouseout’, function (e) {
                            span[i].removeChild(em);
                        })
                    })(i)
                }
            }
            //点击本身删除
            this.clickDel = function () {
                var span = this.ele.getElementsByTagName(‘span’);
                var self = this;
                for (var i = 0; i < span.length; i++) {
                    (function (i) {
                        span[i].addEventListener(‘click’, function () {
                            self.Allarr.splice(i, 1);
                            console.log(self.Allarr);
                            self.render();
                            self.hoverTag();
                            self.clickDel();
                        })
                    })(i)
                }
            }
            console.log(this.Allarr);
        }
        //爱好继承父类
        function likeFun(ele) {
            inputPar.call(this, ele); //继承父层
            console.log(this.Allarr);
        }
        //函数绑定
        var bangDing = function () {
            var tagText = document.getElementById(“tag”);
            var likeText = document.getElementById(“char”);
            var tagContent = document.getElementById(“tagContent”);
            var likeContent = document.getElementById(“likeContent”);
            var likeBtn = document.getElementById(“likeBtn”);
            var tag1 = new tagInput(tagContent);
            var like1 = new likeFun(likeContent);
            return {
                tag: function () {
                    document.onkeyup = function (event) {
                        var e = event || window.event;
                        var keyCode = e.keyCode || e.which;
                        if (keyCode == 32 || keyCode == 13 || keyCode == 188) {
                            if (tagText.value == “” || tagText.value == null) {
                                return false
                            };
                            tag1.chaRu(tagText.value);
                            tag1.hoverTag();
                            tag1.clickDel();
                        }
                    }
                },
                like: function () {
                    likeBtn.addEventListener(‘click’, function () {
                        like1.chaRu(likeText.value);
                    });
                }
            }
        }
        //入口函数
        function init() {
            bangDing().tag();
            bangDing().like();
        }
        init();
    </script>
</body>
</html>

web前端开发适合女生me|前端开发小工具箱|菜鸟前端开发的的工作

» 本文来自:前端开发者 » 《前端开发js面向对象_抽象封装继承》
» 本文链接地址:https://www.rokub.com/4214.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!