jy/src/web/staticres/vipsubscribe/js/additionWord.js

$(function(){

    $('.knowBtn').on('click',function(){
        $(".problemPop").hide()
    })
    $(".problem").on('click',function(){
        $(".problemPop").css("display",'flex');
    })

    function hasWords () {
        var showKeyWordLength = $(".showKeyWord ul").find('li').length;
        if(showKeyWordLength === 0){
            $(".addkeyWord").show();
        } else {
            $(".addkeyWord").hide();
        }
    }
    hasWords()
    
    // 添加按钮
    $(".addKeyWord i").on('click',function(){
        $(".addkeyWord").show()
        $(".addkeyWord input").focus()
        $('.showKeyWord').find('.one').show()
        $('.showKeyWord').find('.modify').hide()
    })
    // 输入框自适应高度
    $('textarea').each(function(i,dom){
        // console.log(i,dom)
        dom.style.height = dom.scrollHeight +'px';
    })
    $("textarea").on("input", function() {
        this.style.height = 'auto';
        this.style.height = this.scrollHeight + "px";
    })
    // 添加keyWords检查输入框内是否有文字，如果有才能点击添加按钮
    $('.addkeyWord input.enterOne').on('input', function() {
        var buttonDOM = $(this).siblings().find('button')[0]
        if ($(this).val().length >= 1) {
            buttonDOM.style.opacity = 1
            buttonDOM.removeAttribute("disabled")
        } else {
            buttonDOM.style.opacity = .5
            buttonDOM.setAttribute("disabled", true)
        }
    })
    
    // 添加 按钮的点击事件
    $('.addkeyWord .btn button').on('click', function(){
        var timestamp = new Date().getTime();//动态生成不同的id，因为id唯一不能重复，所以 用时间戳 代替  防止重复
        var keyWord = $('.addkeyWord input.enterOne').val();
        _addindex = -1;
        //保存新附加词
        _addkws = keyWord;
        saveSession();
        var html = `<li>
                        <div class="one">
                            <div>
                                <span>
                                    <p class="key">${ keyWord }</p>
                                </span>
                            </div>
                            <button class="editKeyWord"><i class="iconfont icon-xiugai"></i> 修改</button>
                        </div>
                        <div class="modify">
                            <textarea  name=""  rows="1"  placeholder="" maxlength="20">${ keyWord}</textarea>
                            <button class="deleteKey">删除</button>
                            <button class="ascertainKey">确定</button>
                        </div>
                    </li>`
        $('.showKeyWord > ul').prepend(html)
        // 隐藏
        $(".addkeyWord").hide();
        $('.showKeyWord').show();
        $('.enter.addkeyWord > input').val('')
        var buttonDOM = $('.enter.addkeyWord .btn button')[0]
        buttonDOM.style.opacity = .5
        buttonDOM.setAttribute("disabled", true)

    })

    // 编辑
    $(".showKeyWord").on('click', '.editKeyWord',function(e){
        $('.enter.addkeyWord').hide()
        $('.addKeyWord').hide()

        let oSpan = $(this).parent().siblings().children('textarea');
        let val = $(oSpan).val()
        $(this).parent().siblings().show().parents('li').siblings().children('.modify').hide().siblings('.one').show()
        $(oSpan).val('').focus().val(val) 
        $(this).parent().hide()
        $(this).parent().siblings().css('display','block')
    })

    // 编辑 删除
    $('.showKeyWord').on('click', '.deleteKey', function(e) {
        var jQueryDOM = $(this).parents('li');
        _addkws = $(this).siblings('textarea').val();
        _addindex = $(".showKeyWord li").length - $(this).parent().parent('li').index() - 1;
        weui.confirm('确定要删除附加词？', {
            buttons: [{
                label: '取消',
                type: 'default',
                onClick: function () { console.log('不删了') }
            }, {
                label: '确定',
                type: 'primary',
                onClick: function () {
                    jQueryDOM.remove();
                    hasWords();
                    $('.addKeyWord').show();
                    saveSession("D");
                }
            }]
        });
    })
    // 编辑 确定
    $('.showKeyWord').on('click', '.ascertainKey', function(e) {
        $('.addKeyWord').show()
        var keyWord = $(this).siblings('textarea').val();
        if(keyWord.length > 20){
            weui.toast('每组附加词不能超过20字', {
                duration: 2000,
                className: 'custom-toast',
                callback: function () { console.log('close') }
            });
        }else{
            _addindex = $(".showKeyWord li").length - $(this).parent().parent('li').index() - 1;
            _addkws = keyWord;
            saveSession();
            $(this).parent().siblings().find('.key').text(keyWord)
            $(this).parent().hide().siblings().show()
        }
    })

    //防止键盘把当前输入框给挡住
    $('input[type="text"],textarea').focus(function () {
        var target = this;
        setTimeout(function(){
            target.scrollIntoViewIfNeeded();
        },400);
    });
})