1. 程式人生 > >input輸入框限制輸入位元組數

input輸入框限制輸入位元組數

在網頁展示中經常會碰到,標題過長,需要擷取字串,用CSS的實現的話各種相容問題,各種坑

下面解決的是在輸入框輸人最多10個漢字20個英文的問題

 //監控鍵盤事件
        var matchWords = 0;
        priceTbWrap.delegate('input[name = "costName"]', 'input propertychange', function () {
            if(utils.getLength($(this).val())<=20){
                matchWords = $(this).val().trim().length;
            }
            if(utils.getLength($(this).val()) > 20){
                $(this).val($(this).val().trim().substr(0,matchWords));
                return false;
            }
        });

當時想到的是用鍵盤事件可是遇到下面的問題
因為第三方輸入法在輸入拼音的時候並沒有把你輸入的字幕寫在輸入框內,而是在輸入法上部暫存,

下面是獲取字串位元組數的方法

/**
     * 獲得字串實際長度,中文2,英文1 要獲得長度的字串
     */
    getLength : function(str) {
        var realLength = 0, len = str.length, charCode = -1;
        for ( var i = 0; i < len; i++) {
            charCode = str.charCodeAt(i);
            if (charCode >= 0 && charCode <= 128)
                realLength += 1;
            else
                realLength += 2;
        }
        return realLength;
    },