小实例---关于input宽度自适应以及多个input框合并拆分

最新推荐文章于 2023-09-12 10:26:30 发布

weixin_33922672

最新推荐文章于 2023-09-12 10:26:30 发布

阅读量1k

点赞数

文章标签：大数据 javascript ViewUI

原文链接：http://www.cnblogs.com/wlpower/p/8064376.html

版权

　　　前两个月，公司内部需要开发关于大数据方面的辅助工具语料分词系统，在这个项目中遇到以下几个主要问题，在此分享~

一、input宽度根据内定文本宽度自适应

　　背景：项目需求中，前台展示，需要从后台获取的.txt文件解析成很多字符串，然后分别放在前台input框中，贴图：

　　其中，每一个字符串，长度不一，所以，input框要根据字符串的长度，发生变化，这里就要解决input自适应的问题了。

　　方法一：网上搜索的，误差很大，仅供参考~

然后，我又改善了一下，减小误差。

//字符串文本
var a1 = "人民网/nz 莫斯科/nsf 31日/t 电/n （/w 记者/nnt 屈海齐/nr ）/w 据/p 俄新社/nt 报道/v ，/w 《/w [今日/t 俄罗斯/nsf]/nz 》/w （/w RussiaToday/x ）/w [总裁/nnt德米特里·基谢廖夫/nrf决定]/v 任命/vn 玛格丽特·西莫尼/nrf 杨/ng 为/p 《/w [今日/t 俄罗斯/nsf]/nz 》/w 通讯社/nis 主编/v ，/w 同时/c 兼任/v 《/w [今日/t俄罗斯/nsf]/nz 》/w [电视/n 频道/n]/nz 主编/v 。/w 玛格丽特·西蒙尼扬/nrf 1980年/t 生于/v [克拉斯/nrf 诺达尔/nrf]/ns 。/w 毕业/v 于/p [库班/nrf 国立/b 大学/nis 新闻系//w 频道/n 主编/v 。/w 2013年12月9日/t ，/w [俄罗斯/nsf 总统/nnt]/nz 普京/nrf 下令/v 在/p 三个月/t 内/f 将/d 《/w 俄新社/nt 》/w 和/cc 《/w [俄罗斯/nsf 之/uzhi 声/qv]/nz 》/w 电台/nis 合并/v 为/p 《/w [今日/t 俄罗斯/nsf]/nz 》/w [国际/n 通讯社/nis]/nt 。/w ";
//把字符串根据空格整理成数组
var strArr = a1.split(" ");
console.log(strArr)

for(var i= 0;i<=strArr.length;i++){
    var ssd = strArr[i]
    //数组元素存放容器
    $("body").append('<div class="q1" style="display:inline-block;font-size:12px;fontFamily:"Serif""></div> '); 
　　 $(".q1").text(ssd) var wid =$(".q1").text(strArr[i]).width(); $(".q1").remove(); 
　　//获取宽度赋值给input宽度
　　 $(".a1").append($('<input type="text">').val(strArr[i]).css({ 
　　　 width: wid +18 ,
 　　　fontSize: "12px", 
　　　 fontFamily:"Serif", 
　　　 boxSizing:"border-box",
 　　  padding:"5px" 
　　})) 
}

想法：

　　首先，在body里新创建一个div（不建议使用span等块状级元素），设置display:inline-block、字体、字体大小。然后把字符串值赋值进去，获取div宽度，再删除掉div。把获取的宽度设置成input的宽度，这里的width = wid +18，需要在页面调试合适宽度。其中，input内的字符串也要设置字体、字体大小，减少误差。最后成为这样~

　　方法二：根据scrollWidth、clientWidth判断。

　　scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。

　　clientWidth：对象内容的可视区的宽度。

　　在input内，scrollWidth也就相对于input中value值的长度。clientWidth相当于input默认宽度（能看到的宽度）。

for (var i = 0; i < strArr.length; i++) {
    var ssd = strArr[i];
    $(".a1").append($('<input type="text">').val(strArr[i]));
}
$("input").each(function(index, item){
    if (item.scrollWidth > item.clientWidth) {
      item.style.width = item.scrollWidth + 4 + "px";
    }
})

　　注意两点：

　　　　一点是，代码中展示的scrollWidth > clientWidth的时候，因为value值内容含字母符号等，获取scrollWidth有几像素的误差，加上就可以了，调试过后，没问题。

　　　　第二点，scrollWidth < clientWidth 时候又该怎么让input自适应呢？？？做东西呢，不能过于死脑筋。把input的宽度设置5px或者10px，让scrollWidth 总是大于clientWidth不就可以了吗！老铁，没毛病吧，哈哈哈哈~

二、input合并

　　关于合并，在开始解决这个功能之前，应该分析出该功能实现所遇到的核心问题。

点击多个input是否连续，非连续不可合并。（项目需求）
获取到的value值如何添加到合并的位置上。

　　分析完问题，方向明确了，也就好做了。

　　首先是连续问题，先看代码：

　　var inputArr = [];
    var item = 0;
    var len;
    var inputVal="";
    $("#demo").on("click","input",function(){
        //添加选中样式
        $(this).toggleClass('bd1');
        item = $(this).index();
        inputArr.push(item);
        //再次点击，inputArr数组删除 所对应的item值
        len=inputArr.length;
        for(var i=0;i<len;i++){
                if(item == inputArr[i]){
                    inputArr.splice(i,1);
                    console.log(inputArr);
                    return;
                }
            };
            //数组排序
            inputArr.sort();
            console.log(inputArr)
    });

说明：

　　这里只是做了准备工作。点击input框获取它的index值，然后把index值push到一个新数组，然后进行排序。其中for循环是input框取消选中时，删除新数组中所对应的index值。

接下来需要一个判断数组是否为连续的如[1,2,3,4,5]方法，网上这类的有很多，我用了其中一个：

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

然后就是点击合并按钮，所要处理的事件了。

$("#combine").on("click",function(){
    var strArr = '';
    if(!isContinuationInteger(inputArr)){
        alert('不合法');
        return ;
    }else{
        inputArr.map(function(v){
            strArr += $('input').eq(v).val();
        })
        $(".bd1").each(function(e){
            console.log(e);
            $(this).eq(e).before($('<input type="text" readonly>').val(strArr));
            $(this).remove();
            inputArr =[];
            //console.log($(this).eq(e))              
        })
    }
})

这里要注意的有：

点击事件需要用到on()方法，不可直接用click方法，主要原因是在这个点击事件内添加了新的input框，然后，新的input也可以实现合并功能，也就有了事件委托。
数组遍历map()方法，调用数组中的每一个元素，然后把相对应的value值合并成一个字符串。
新的input添加，这里用到点击input动态添加的class，然后是each()方法返回的index值，再根据input框所在位置eq()，在它之前添加input，然后删除它本身。
以上步骤完成之后，一定要清空存放input框index值的数组。这点要注意。

三、input拆分

　　input拆分，核心问题在于，获取光标所在位置，然后根据空格键进行拆分，用js或者jq实现的话，很麻烦，为了效率在网上找一些封装方法。要是用angluar或者vue，根据ng-model或者v-model双向数据绑定，再用watch监督，根据value值中的光标位置，点击快捷键会出现空格，然后进行字符串拆分，应该就容易了！（纯想法，有兴趣的可以尝试一下）

　　这里主要是jq实现：

　　首先是封装方法，还是前边讲的，有很多时候不能死脑筋，换种思路，问题就迎刃而解了。如果说，根据光标位置进行快捷键进行拆分不好获取，是不是可以找一些方法在光标位置插入某个字符串，然后再根据这个字符串进行分割，然后就找到了下面的封装方法：

/* 在textarea处插入文本--Start */
(function($) {
    $.fn.extend({
        insertContent : function(myValue, t) {
            var $t = $(this)[0];
            if (document.selection) { // ie
                this.focus();
                var sel = document.selection.createRange();
                sel.text = myValue;
                this.focus();
                sel.moveStart('character', -l);
                var wee = sel.text.length;
                if (arguments.length == 2) {
                    var l = $t.value.length;
                    sel.moveEnd("character", wee + t);
                    t <= 0 ? sel.moveStart("character", wee - 2 * t - myValue.length) : sel.moveStart( "character", wee - t - myValue.length);
                    sel.select();
                }
            } else if ($t.selectionStart
                || $t.selectionStart == '0') {
                var startPos = $t.selectionStart;
                var endPos = $t.selectionEnd;
                var scrollTop = $t.scrollTop;
                $t.value = $t.value.substring(0, startPos)
                    + myValue
                    + $t.value.substring(endPos,$t.value.length);
                this.focus();
                $t.selectionStart = startPos + myValue.length;
                $t.selectionEnd = startPos + myValue.length;
                $t.scrollTop = scrollTop;
                if (arguments.length == 2) {
                    $t.setSelectionRange(startPos - t,
                        $t.selectionEnd + t);
                    this.focus();
                }
            } else {
                this.value += myValue;
                this.focus();
            }
        }
    })
})(jQuery);
/* 在textarea处插入文本--Ending */

使用方法是：$(文本域选择器).insertContent("插入的内容");

贴码：

$("#split").on("click",function(){
    var splitArr=[];
    $(".bd1").each(function(e){
        splitArr.push(e);
    });
    if(splitArr.length>1){
        alert("只能选择一个字符串拆分！");
        $(this).removeClass("bd1");
        return;
    }else{
        $(".bd1").each(function(e){
            //inputVal是选中input框的value值
            if(inputVal.length<2){
                alert("字符数量必须大于两个！");
                $(this).removeClass("bd1");
                return;
            }else{
                if( $(this).hasClass("bd1")){
                    $(this).toggleClass("dw1");
                    $(this).removeAttr("readonly");
                    //console.log("sdasdsad");
                    $(this).keypress(function(event){
                        if ( $(this).hasClass('dw1')){
                            if (event.keyCode == 32) {
                                $(this).insertContent("#");
                                //console.log($(this).insertContent("#"))
                                var value1 =  $(this).val();
                                console.log(value1.split("#"))
                                var valueone = value1.split("#")[0];
                                var valuetwo = value1.split("#")[1];
                                $(this).eq(e).before($('<input type="text" readonly>').val(valueone));
                                $(this).eq(e).after($('<input type="text" readonly>').val(valuetwo));
                                $(this).remove();
                            }
                        }
                    })
                }
            }
        });
    }
});