zoukankan      html  css  js  c++  java
  • javascript 输入框监听事件

    <div class="coupon-exchange clearfix">
            <div class="code-input">
                <input type="text" placeholder="请输入兑换码" class="input" id="couponExchangeInput"/>
                <i class="icon-clear" id="couponExchangeClear"></i>
            </div>
            <div class="btn-exchange" id="couponExchangeBtn">兑换</div>
        </div>
    function couponExchange() {
      //中文输入,输入完成后才触发事件
        var flag = true;
        $('#couponExchangeInput').on('compositionstart',function(){
            flag = false;
        });
        $('#couponExchangeInput').on('compositionend',function(){
            flag = true;
        });
        $('#couponExchangeInput').on('input', function(){
            var _this = this;
            setTimeout(function(){
                if(flag){
                    var _val = $(_this).val();
                    $('#couponExchangeBtn').addClass('active');
                    $('#couponExchangeClear').css('display', 'block');
                    if(_val == ''){
                        $('#couponExchangeBtn').removeClass('active');
                        $('#couponExchangeClear').hide();
                    }
                    if(strlen(_val) > 100){
                        var _cutVal = cut_str(_val, 50);
                        $(_this).val(_cutVal);
                    }
                }
            },0);
        });
        $('#couponExchangeClear').click(function(){
            $('#couponExchangeBtn').removeClass('active');
            $('#couponExchangeClear').hide();
            $('#couponExchangeInput').val('').focus();
        });
        $('#couponExchangeInput').blur(function(){
            var _val = $(this).val();
            if(strlen(_val) > 100){
               var _cutVal = cut_str(_val, 50);
                $(this).val(_cutVal);
            }
        });
        $('#couponExchangeBtn').click(function(){
            if($(this).hasClass('active')){
                console.log(1);
            }
        });
    }
    //获取字符串的长度,一个中文占位两个字符长度
    function strlen(str) {
        var len = 0;
        for (var i = 0; i < str.length; i++) {
            var c = str.charCodeAt(i);
            if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
                len++;
            }
            else {
                len += 2;
            }
        }
        return len;
    }
    //截取字符串的长度,一个中文占位两个字符长度
    function cut_str(str, len){
        var char_length = 0;
        for (var i = 0; i < str.length; i++){
            var son_str = str.charAt(i);
            encodeURI(son_str).length > 2 ? char_length += 1 : char_length += 0.5;
            if (char_length >= len){
                var sub_len = char_length == len ? i+1 : i;
                return str.substr(0, sub_len);
                break;
            }
        }
    }
  • 相关阅读:
    Hive、Presto、Kylin、Impala、Sparksql、Druid 区别
    HIVE vs HBASE
    mysql vs mongodb
    关于MCU 开门狗要求
    JAVA转OC j2objc
    DTD文件映射
    装饰者模式(Decorator)
    Spring Boot 概述
    C语言也会短路?盘点C语言中那些令人匪夷所思的情况!
    程序员的天梯排行榜!你的理想高度在哪里?
  • 原文地址:https://www.cnblogs.com/ilovexiaoming/p/9896952.html
Copyright © 2011-2022 走看看