小实例—关于input宽度自适应以及多个input框合并拆分 – 笑疯洋洋

   头两个月,公司得利用辅助工具和文集使成粉末零碎,在执意大约项主语中偶然被发现的事物了以下次要成绩。,分享嗨

一、输出宽度依本质上的发短信宽度自适应。


  语境:项主语得中,突出的地方展览品,得从后盾获取的.txt发送被解析为,与把它们放在突出的地方的输出框里。,小海图:

  执政的,每串,程度找头,因而,输出框得做的事本字母行的程度。,发作找头,在嗨,笔者得处置输出适配成绩。。

  方法一:网上搜索的,偏离很大。,仅供参考~

    

与,我又先进了。,高处偏离。

//字母行发短信var a1 = 居民/新西兰居民 莫斯科/美国政府科学认识地基 31日/t 电的/N (/w 新闻报道记者/NNT 屈海琦/弹性橡皮 )/w 依/ P 现俄罗斯通讯社/台北 告发/V ,/w 《/w [昔日/吨] 现俄罗斯/美国政府科学认识地基/新西兰 》/w (/w RussiaToday/x )/w [总统/ NNT Dmitri Kiselev /NRF决议] /V 指定/VN Margaret Simone/NRF 杨/NG 就/ P 《/w [昔日/吨] 现俄罗斯/美国政府科学认识地基/新西兰 》/w 通讯社/NIS 总编辑/V ,/w 同时/ C 接着发生/ V 《/w [昔日/吨]现俄罗斯/美国政府科学认识地基/新西兰 》/w 电视节目/N 通行证/N/NZ 总编辑/V 。/w Margaret Simonyan/NRF 1980年/t 生于/v 克里斯/NRF 结/ NRF/NS 。/w 卒业/ V AT/P 古巴/NRF 政府/地面 综合性大学/NIS 新闻报道部 通行证/N 总编辑/V 。/w 2013年12月9日/t ,/w 现俄罗斯/美国政府科学认识地基 总统/全国人民代表大会/新西兰政府同盟国 普京/NRF 按次/ V AT/P 学期/t 本质上的/ f 威尔/ D 《/w 现俄罗斯通讯社/台北 》/w 和/或CC 《/w 现俄罗斯/美国政府科学认识地基 之/uzhi 使出声/qv/nz 》/w 电台/新闻报道处 合/ V 就/ P 《/w [昔日/吨] 现俄罗斯/美国政府科学认识地基/新西兰 》/w [国际] 通讯社/NIS]/nt 。/w ";
//按空格排序字母行var strArr = (" ");
(strArr)

for(var i= 0;i<=){
    var ssd = strArr[i]
    //街区元素储藏处一副
    (保健)。
'');
$(
Q1发短信(SSD) var wid =$(Q1发短信(SrARR[i]).宽度 $(Q1).remove();
  //如愿以偿输出宽度的宽度分派
   (.1)''Var(SrARR[i])
width: wid
+18 ,
fontSize:
"12px",
fontFamily:
"Serif",
boxSizing:
"border-box",
padding:
"5px"
}))
}

打手势需求:

  率先,在体中发觉一新的div(不运用跨度类块级元素),设置display:inline-block、编造、编造大小。与将字母行值分派给它。,如愿以偿div宽度,再次停止div。。将获取的宽度设置为输出宽度。,此处宽度 = wid +18,您得调试页表上的针对性宽度。。执政的,输出达到目标字母行也得设置编造。、编造大小,高处偏离。事实执意大约完毕的。

  方法二:依骨碌宽度、clientWidth判别。

  scrollWidth:宾语的实践质地的宽度,不大发国际宽度,跟随宾语的质地超越视觉区域,它将高处。。

  clientWidth:宾语质地的可见区域的宽度。

  在input内,骨碌宽度也与输出达到目标值的程度关系。。CeleTrand相当于输出默许宽度(求教于宽度)。

for (var i = 0; i < strArr.length; i++) {
    var ssd = strArr[i];
    $(A1''瓦尔(斯特拉尔)
}
$(输出function(标引), 项主语)
    if (项主语).scrollWidth > item.clientWidth) {
      item.style.width = item.scrollWidth + 4 + "px";
    }
})

  在意两点:

    有一件事是,密码中显示的骨碌宽度  >  clientWidth的时辰,因值克制字母标准。,获取骨碌宽度有各自的像素有毛病。,累积而成它。,调试后,没成绩。

    次货点,scrollWidth  <  clientWidth  时辰又该怎么让input自适应呢???  做东西呢,不克不及过于死脑筋。把input的宽度设置5px或者10px,让scrollWidth  总是大于clientWidth不就可以了吗!老铁,没毛病吧,哈哈哈哈~

二、输出合


涉及合,在开端处置执意大约职务垄断,笔者要剖析实施福建所偶然被发现的事物的胸部成绩。。

  1. 单击多个输出是陆续的。,不陆续不工会。(项主语需求)
  2. 什么将值添加到合驻扎军队。

  剖析完成或结束绩,方针的决定是详述的的。,也就好做了。

  率先是陆续性。,先看密码。:

  var inputArr = [];
    var item = 0;
    var len;
    var inputVal="";
    $(演示(点击),"input",function(){
        //添加挑选的生活方法
        $(this).toggleClass(''bd1'');
        item = $(this).index();
        (项主语)
        //再次点击,输出街区停止 对应项主语值得的
        len=inputArr.length;
        for(var i=0;i){
                if(项主语) == inputArr[i]){
                    (i,1);
                    (inputArr);
                    return;
                }
            };
            //街区排序            ();
            (inputArr)
    });

阐明:

  这全然一非直接地性生产工作。。单击输出框以获取其标引值。,与将标引值推送到一新街区中。,与整顿它们。。for到处是在未选中输出框的状态下。,停止新街区达到目标相符合标引值。。

接下来,笔者得决定街区可能的选择是陆续的,譬如[1。,2,3,4,5 ]方法,互联网网络上有很多大约的事实。,我用过执政的一。:

function isContinuationInteger(ARR)
    if(!ARR)
        returnfalse;
    }
    if(){
        returntrue;
    }
    var len=arr.length;
    var n0=arr[0];
    var sortDirection=1;
    if(ARR〔0〕>ARR〔1〕]){
        sortDirection=-1;
    }
    if((n0*1+(len-1)*sortDirection)!==arr[len-1]){
        returnfalse;
    }
    var isContinuation=true;
    for(var i=0;i){
        if(ARR[i])!==(i+n0*sortDirection)){
            isContinuation=false;
            break;
        }
    }
    return isContinuation;
}

与单击合使系牢之物。,要处置的事情。

(结成)。(点击),function(){
    var strArr = '''';
    if(!isContinuationInteger(inputArr)){
        alert(非法移民);
        return ;
    }else{
        (function(v){
            strArr += (输出)情商(V)
        })
        $(".bd1").each(function(e){
            (e);
            $(thisEQ(E)'').val(strArr));
            $(this).remove();
            inputArr =[];
            //(执意大约)情商(e)                      })
    }
})

笔者得做的事在意嗨。:

  1. 单击事情得ON()方法。,不要直接地运用点击方法。,次要原因是新的输出框被添加到执意大约点击事情。,与,新的输出还可以合职务。,也一事情付托。。
  2. 街区遍历熭()方法,召集街区达到目标每个元素,与将相符合的值结成成一字母行。。
  3. 新增输出添加,单击此处可静态添加类以输出。,与由每个()方法赢利的标引值。,再次依输出框EQ的驻扎军队,在它垄断添加输出。,与停止它自己。。
  4. 再使感动完成或结束后,须清空保留输出框标引值的街区。。得做的事在意这点。。

三、input拆分


   input拆分,胸部成绩依赖,获取光标驻扎军队,与依间隔键停止使成粉末。,运用JS或JQ。,很累赘,找寻稍许地在线功效的封装方法。。假设您运用角或VUE,本NG样品或V样品的双向唱片绑定,防范监视,依光标驻扎军队的值,单击快捷使系牢之物以显示空白。,与字母行被拆分。,这得做的事简单明了。!(上等的的思惟),有兴趣的可以试试看。  

  这次要是经过JQ实施的。:

  第一是封装。,据我看来先谈一下。,有很多次你不克不及损失打趣话。,超自然的总的印象,成绩处置了。。假设说,快捷键依光标驻扎军队停止使成粉末。,你能找到在光标驻扎军队拔出字母行的方法吗?,与依该字母行停止部门。,与笔者被发现的事物了上面的封装方法。:

/* 拔出发短信——从发短信开端 */
(function($) {
    $.({
        insertContent : function(myValue, t) {
            var $t = $(this)[0];
            if () { // iethis.focus();
                var sel = .createRange();
                sel.text = myValue;
                this.focus();
                (特点, -l);
                var wee = sel.text.length;
                if (arguments.length == 2) {
                    var l = $;
                    sel.moveEnd("character", wee + t);
                    t <= 0 ? ("character", wee - 2 * t - myValue.length) : ( "character", wee - t - myValue.length);
                    ();
                }
            } elseif ($
                || $ == ''0'') {
                var startPos = $;
                var endPos = $t.selectionEnd;
                var scrollTop = $
                $t.value = $(0, startPos)
                    + myValue
                    + $(endPos,$);
                this.focus();
                $ = startPos + myValue.length;
                $t.selectionEnd = startPos + myValue.length;
                $t.scrollTop = scrollTop;
                if (arguments.length == 2) {
                    $(startPos - t,
                        $t.selectionEnd + t);
                    this.focus();
                }
            } else {
                this.value += myValue;
                this.focus();
            }
        }
    })
})(jQuery);
/* 拔出发短信-断流器于发短信 */

运用方法是:(发短信域选择者)InsertContent(拔出质地)

贴码:

(拆分)(点击),function(){
    var splitArr=[];
    $(".bd1").each(function(e){
        (e);
    });
    if(){
        alert(唯一的选择一字母行停止拆分。!");
        $(this).removeClass("bd1");
        return;
    }else{
        $(".bd1").each(function(e){
            //输出是选择的输出框的值。if(){
                alert(性格数得大于两个。!");
                $(this).removeClass("bd1");
                return;
            }else{
                if( $(this).hasClass("bd1")){
                    $(this).toggleClass("dw1");
                    $(this).removeAttr("readonly");
                    //("sdasdsad");
                    $(this).keypress(function(事情)
                        if ( $(this).hasClass(''dw1'')){
                            if (event.keyCode == 32) {
                                $(this).insertContent("#");
                                //($(this).insertContent("#"))var value1 =  $(this).val();
                                (("#"))
                                var valueone = ("#")[0];
                                var valuetwo = ("#")[1];
                                $(thisEQ(E)'').val(valueone));
                                $(thisEQ(e)后($)'').val(valuetwo));
                                $(this).remove();
                            }
                        }
                    })
                }
            }
        });
    }
});

  在嗨,笔者运用拆分()方法将字母行使成粉末成街区。,JS文档的独有的特性描述,不在意的嗨。。

  补充说明:质地异常少。,但我险乎花了一天到晚时期。 ,真风趣。

                                                          

发表评论

电子邮件地址不会被公开。 必填项已用*标注