masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
javascript - data-model的含义和remainingCharacters函数
阿神
阿神 2017-04-10 15:45:37
0
3
771

html结构
<h2>限制输入字符的长度 不会区分中英文字符和数字的编码占位js版 </h2>

<input type="text" name="lname" date-length="5" id="limitLength" data-model="Ch">

js代码

<script>
var limitLength = document.getElementById('limitLength');
var clearNonumber = function(tThis) {
    var _v = tThis.value;
    var _vLen = _v.length;
    var dataLength = tThis.getAttribute('data-length');
    var dateModel = tThis.getAttribute('data-model');
    var subLen = dataLength;
    if (_vLen > dataLength) tThis.value = _v.substr(0, subLen);
    if (*remainingCharacters*) {
        self.showRemainingCharacters(!_vLen ? dataLength : (_vLen > dataLength ? 0 : dataLength - _vLen), remainingCharacters);
    }
};

limitLength.onfocus = limitLength.onkeyup = limitLength.onblur = function() {
    clearNonumber(this);
};
</script>

以上代码是js控制字符串长度的代码， chrome浏览器提示remainingCharacters in not defined， 所以不起作用 哪位大神给看一下 第一不知道remainingCharacters 在这里面是什么意思，第二dataModel不知道在这里面起到什么作用 谢谢

阿神
阿神

闭关修行中......

membalas semua(3)
迷茫
迷茫2017-04-10 15:47:37 Tingkat 3

你从别处粘贴复制的代码吧 不全

你贴出的这一点代码 没有用到 dataModel

Suka +0
Tambah Balasan
迷茫
迷茫2017-04-10 15:47:37 Tingkat 2

这个问题我也遇到了

Suka +0
Tambah Balasan
左手右手慢动作
左手右手慢动作2017-04-10 15:47:37 Tingkat 1

你好，您的问题是出自2014-09-《超实用的JavaScript代码段》一书中第二章第十节的，无需解答。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>2.10节 实时显示还可以输入多少字符（区分中英文）</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>
    .remainingCharacters {
        color: green;
        font-weight: bold;
    }
</style>
<body>
<h2>实时显示还可以输入多少字符（区分中英文）</h2>
<input type="text" data-length='5' id='remainingCharacters' data-remainingCharacters="charActers1,charActers2"
       data-model='Ch' name="remainingCharacters"/><br/>
<p>测试1：还可以输入<span class='remainingCharacters' id="charActers1">5</span>字符</p>
<p>测试2：还可以输入<span class='remainingCharacters' id="charActers2">5</span>字符</p>
<script type="text/javascript">
    window.onload = function () {
        var forElementArr           = function ( _elementArr,callBack ) {            //遍历节点
                var arr  = _elementArr,                        //所有节点对象
                    self = this;                            //外层环境
                if ( !(_elementArr instanceof Array) ) {//如果不是数组，变成数组对象方便处理
                    arr = [ _elementArr ];
                }
                ;
                for ( var i = 0,arrLen = arr.length; i < arrLen; i++ ) {        //遍历数组
                    var arrI = arr[ i ];
                    if ( typeof arrI == "string" ) {                    //判断是否为字符串
                        arrI = document.getElementById ( arrI );
                    }
                    callBack && callBack ( i,arrI );                    //如果存在回调则执行回调
                }
            },
            showRemainingCharacters = function ( _nums,_remainingCharacters ) {
                //data-remainingCharacters="charActers1,charActers2"
                if ( _remainingCharacters.search ( "," ) != -1 ) {
                    _remainingCharacters = _remainingCharacters.split ( "," );//英文字符串分割
                }
                forElementArr ( _remainingCharacters,function ( _index,_this ) {
                    _this.innerHTML = (_nums && _nums.toString ()) || "0";
                } );
            },

            strLen                  = (function () {                                //统计中英文字符数
                var trim = function ( chars ) {
                    return (chars || "").replace ( /^(\s|\u00A0)+|(\s|\u00A0)+$/g,"" );
                }

                return function ( _str,_model ) {                    //返回字符处理的函数
                    _str = trim ( _str ),
                            _model = _model || "Ch";                //默认为中文模式
                    var _strLen = _str.length;                    //获取字符长度
                    if ( _strLen == 0 ) {                            //如果字符长度为0直接返回
                        return 0;
                    }
                    else {
                        var chinese = _str.match ( /[\u4e00-\u9fa5]/g ); //匹配中文
                        return _strLen + (chinese && _model == "Ch" ? chinese.length : 0);
                    }
                };
            }) (),
            //获取限制对象
            remainingCharacters     = document.getElementById ( "remainingCharacters" ),
            clearNonumber           = function ( tThis ) {                //清除数字字符
                var _v                  = tThis.value,
                    _vLen               = _v.length,
                    dataLength          = tThis.getAttribute ( "data-length" ),
                    remainingCharacters = tThis.getAttribute ( "data-remainingCharacters" ),//如果有实时显示的属性，则在指定元素上显示
                    dataModel           = tThis.getAttribute ( "data-model" ),    //区分中英文模式
                    subLen              = dataLength;
                if ( dataModel == "Ch" ) {                        //如果为中文模式
                    _vLen = strLen ( _v,dataModel );            //获取字符长度+中文长度
                    var vv = _v.match ( /[\u4e00-\u9fa5]/g );
                    subLen = dataLength - (!vv ? 0 : vv.length);
                }
                if ( _vLen > dataLength )  tThis.value = _v.substr ( 0,subLen );
                if ( remainingCharacters ) {
                    //_vLen存在为true，大于限定长度返回0，小于的话返回差多少字符
                    showRemainingCharacters ( !_vLen ? dataLength : (_vLen > dataLength ? 0 : dataLength - _vLen),remainingCharacters );
                }
            };
        remainingCharacters.onfocus = function () {                //获取焦点
            clearNonumber ( this );
        }
        remainingCharacters.onkeyup = function () {                //键盘事件
            clearNonumber ( this );
        }
        remainingCharacters.onblur = function () {                //失去焦点
            clearNonumber ( this );
        }
    };
</script>
</body>
</html>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan