コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JS入力ボックスメールボックス自動プロンプト関数コード実装_javascriptスキル

WBOY
リリース： 2016-05-16 17:10:04
オリジナル
1242 人が閲覧しました

同様に、このプラグインには HTML タグは必要ありません。対応するクラス名を含む入力ボックスのみが必要で、親にはクラス名があり、他には何も必要ありません。内部 HTML コードは自動的に生成されます。

HTML コードは次のとおりです:

コードをコピー コードは次のとおりです:



実際、上記の div タグは必要ありません。入力ボックスと親要素に上記のようにクラスを追加するだけです (カスタマイズすることもでき、JS の初期化中にクラスを渡すだけです。デフォルトでは、親クラスはparentClsと呼ばれ、現在の入力ボックスのクラスはinputElemと呼ばれ、隠しフィールドのクラスはhiddenClsと呼ばれます。単に初期化して、初期化中に空のオブジェクトを直接渡すだけです。ページ上には複数の入力ボックスが存在する可能性があるため、どの入力ボックスであるかを区別するために親クラスが必要になります。もちろん、開発バックエンドに値を保存するには非表示フィールドが必要です。

設定項目にメールボックス配列パラメータ mailArr があります: ["@qq.com", "@qq2.com", "@gmail.com", "@126.com", "@163.com" 、「@hotmail.com」、「@yahoo.com」、「@yahoo.com.cn」、「@live.com」、「@sohu.com」、「@sina.com」]。これは、何を入力しても、非常に多くのデフォルトのメールボックスがあることを示しています。ドロップダウン ボックスが初期化されると、特定の項目を特定するためのプロンプトが表示されます。ドロップダウンボックスの項目。もちろん、要件の変更により、初期化時に必要に応じて電子メール パラメーターを構成できます。

コーディングスタイルは以前と同じです。

実装される機能は以下のとおりです:

1. キーボードの上下移動、マウスのクリックと入力操作をサポートします。

2. ドキュメントをクリックすると、現在の入力ボックスを除いてドロップダウン ボックスが非表示になります。入力を続けると自動マッチングなどが行われます。

詳細は説明しませんが、オンライン登録時の自動メール プロンプト機能と同じです。何かバグがある場合は、まだ早いので、メッセージを残してください。コードを直接貼り付けます:

CSS コードは次のとおりです:

コードをコピー コードは次のとおりです:


JS コードは次のとおりです:

コードをコピー コードは次のとおりです:

/**
 * 邮箱自动提示插件
 * @constructor EmailAutoComplete
 * @ options {object} 可配置项
 */

 function EmailAutoComplete(options) {

    this.config = {
        targetCls      :  '.inputElem',       // 目标input元素
        parentCls      :  '.parentCls',       // 当前input元素的父级类
        hiddenCls      :  '.hiddenCls',       // 当前input隐藏域
        searchForm     :  '.jqtransformdone', //form表单
        hoverBg        :  'hoverBg',          // 鼠标移上去的背景
        inputValColor  :  'red',              // 输入框输入提示颜色
        mailArr        : ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"], //邮箱数组
        isSelectHide   : true,                // 点击下拉框 是否隐藏 默认为true
        callback       : null                 // 点击某一项回调函数
    };
    this.cache = {
        onlyFlag            : true,     // 只渲染一次
        currentIndex        : -1,
        oldIndex            : -1
    };

    this.init(options);
 }

EmailAutoComplete.prototype = {

    constructor: EmailAutoComplete,

    init: function(options){
        this.config = $.extend(this.config,options || {});

        var self = this,
            _config = self.config,
            _cache = self.cache;

        $(_config.targetCls).each(function(index,item){

            $(item).keyup(function(e){
                var target = e.target,
                    targetVal = $.trim($(this).val()),
                    keycode = e.keyCode,
                    elemHeight = $(this).outerHeight(),
                    elemWidth = $(this).outerWidth(),
                    parentNode = $(this).closest(_config.parentCls);

                $(parentNode).css({'position':'relative'});
                // 如果输入框值为空的话 那么下拉框隐藏
                if(targetVal == '') {
                    $(item).attr({'data-html':''});
                    // 给隐藏域赋值
                    $(_config.hiddenCls,parentNode).val('');

                    _cache.currentIndex = -1;
                    _cache.oldIndex = -1;
                    $(".auto-tip",parentNode) && !$(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).addClass('hidden');
                    self._removeBg(parentNode);
                }else {

                    $(item).attr({'data-html':targetVal});

                    // 给隐藏域赋值
                    $(_config.hiddenCls,parentNode).val(targetVal);

                    $(".auto-tip",parentNode) && $(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).removeClass('hidden');
                    // 渲染下拉框内容
                    self._renderHTML({keycode:keycode,e:e,target:target,targetVal:targetVal,height:elemHeight,width:elemWidth,parentNode:parentNode});
                }

               
            });
        });

       // 阻止form表单默认enter键提交
       $(_config.searchForm).each(function(index,item) {
            $(item).keydown(function(e){
                 var keyCode = e.keyCode;
                 if(keyCode == 13) {
                     return false;
                 }
            });
       });

       // 点击文档document时候 下拉框隐藏掉
       $(document).click(function(e){
          e.stopPropagation();
          var target = e.target,
              tagCls = _config.targetCls.replace(/^\./,'');

          if(!$(target).hasClass(tagCls)) {
             $('.auto-tip') && $('.auto-tip').each(function(index,item){
                 !$(item).hasClass('hidden') && $(item).addClass('hidden');
             });
          }
       });
    },
    /*
     * 渲染下拉框提示内容
     * @param cfg{object}
     */
    _renderHTML: function(cfg) {
        var self = this,
            _config = self.config,
            _cache = self.cache,
            curVal;
        var curIndex = self._keyCode(cfg.keycode);

        $('.auto-tip',cfg.parentNode).hasClass('hidden') && $('.auto-tip',cfg.parentNode).removeClass('hidden');
        if(curIndex > -1){
            // 键盘上下操作
            self._keyUpAndDown(cfg.targetVal,cfg.e,cfg.parentNode);
        }else {
            if(/@/.test(cfg.targetVal)) {
                curVal = cfg.targetVal.replace(/@.*/,'');
            }else {
                curVal = cfg.targetVal;
            }
            if(_cache.onlyFlag) {
                $(cfg.parentNode).append('');
                var wrap = '

    ';

                    for(var i = 0; i < _config.mailArr.length; i++) {

    wrap += '

  • '+''+_config.mailArr[i]+'
    • ';
                    }
                    wrap += '
';
                _cache.onlyFlag = false;
                $(cfg.parentNode).append(wrap);
                $('.auto-tip',cfg.parentNode).css({'position':'absolute','top':cfg.height,'width':cfg.width - 2 + 'px','left':0,
                    'border':'1px solid #ccc','z-index':10000});
            }

            // 给所有li添加属性 data-html
            $('.auto-tip li',cfg.parentNode).each(function(index,item){
                $('.output-num',item).html(curVal);
                !$('.output-num',item).hasClass(_config.inputValColor) &&
                $('.output-num',item).addClass(_config.inputValColor);
                var emVal = $.trim($('.em',item).attr('data-html'));
                $(item).attr({'data-html':curVal + '' +emVal});
            });

            // 精确匹配内容
            self._accurateMate({target:cfg.target,parentNode:cfg.parentNode});

            // 鼠标移到某一项li上面时候
            self._itemHover(cfg.parentNode);

            // 点击对应的项时
            self._executeClick(cfg.parentNode);
        }

    },
    /**
     * 精确匹配某项内容
     */
    _accurateMate: function(cfg) {
        var self = this,
            _config = self.config,
            _cache = self.cache;

        var curVal = $.trim($(cfg.target,cfg.parentNode).attr('data-html')),
            newArrs = [];
        if(/@/.test(curVal)) {

            // 获得@ 前面 后面的值
            var prefix = curVal.replace(/@.*/, ""),
                suffix = curVal.replace(/.*@/, "");

            $.map(_config.mailArr,function(n){
                var reg = new RegExp(suffix);
                if(reg.test(n)) {
                    newArrs.push(n);
                }
            });
            if(newArrs.length > 0) {
                $('.auto-tip',cfg.parentNode).html('');
                $(".auto-tip",cfg.parentNode) && $(".auto-tip",cfg.parentNode).hasClass('hidden') &&
                $(".auto-tip",cfg.parentNode).removeClass('hidden');

                var html = '';
                for(var j = 0, jlen = newArrs.length; j < jlen; j++) {
html += '

  • '+''+newArrs[j]+'
    • ';
                    }
                    $('.auto-tip',cfg.parentNode).html(html);

                    // 给所有li添加属性 data-html
                    $('.auto-tip li',cfg.parentNode).each(function(index,item){
                        $('.output-num',item).html(prefix);
                        !$('.output-num',item).hasClass(_config.inputValColor) &&
                        $('.output-num',item).addClass(_config.inputValColor);

                        var emVal = $.trim($('.em',item).attr('data-html'));

                        $(item).attr('data-html','');
                        $(item).attr({'data-html':prefix + '' +emVal});
                    });

                    // 精确匹配到某项时候 让当前的索引等于初始值
                    _cache.currentIndex = -1;
                    _cache.oldIndex = -1;

                    $('.auto-tip .output-num',cfg.parentNode).html(prefix);

                    // 鼠标移到某一项li上面时候
                    self._itemHover(cfg.parentNode);

                    // 点击对应的项时
                    self._executeClick(cfg.parentNode);
                }else {
                    $(".auto-tip",cfg.parentNode) && !$(".auto-tip",cfg.parentNode).hasClass('hidden') &&
                    $(".auto-tip",cfg.parentNode).addClass('hidden');
                    $('.auto-tip',cfg.parentNode).html('');
                }
            }
        },
        /*
         * 鼠标移到某一项li上时
         */
        _itemHover: function(parentNode) {
            var self = this,
                _config = self.config,
                _cache = self.cache;
            $('.auto-tip li',parentNode).hover(function(index,item) {
                !$(this).hasClass(_config.hoverBg) && $(this).addClass(_config.hoverBg);
            },function() {
                $(this).hasClass(_config.hoverBg) && $(this).removeClass(_config.hoverBg);
            });
        },
        /*
         * 当输入框值为空时候 li项都删掉class hoverBg
         */
        _removeBg: function(parentNode){
            var self = this,
                _config = self.config;

            $(".auto-tip li",parentNode).each(function(index,item){
                $(item).hasClass(_config.hoverBg) && $(item).removeClass(_config.hoverBg);
            });   
        },
        /**
         * 键盘上下键操作
         */
         _keyUpAndDown: function(targetVal,e,parentNode) {
            var self = this,
                _cache = self.cache,
                _config = self.config;

            // 如果请求成功后 返回了数据(根据元素的长度来判断) 执行以下操作
            if($('.auto-tip' + ' li',parentNode) && $('.auto-tip' + ' li').length > 0) {

                var plen = $('.auto-tip' + ' li',parentNode).length,
                    keyCode = e.keyCode;
                    _cache.oldIndex = _cache.currentIndex;
               

                // 上移操作
                if(keyCode == 38) {
                    if(_cache.currentIndex == -1) {
                        _cache.currentIndex = plen - 1;
                    }else {
                        _cache.currentIndex = _cache.currentIndex - 1;
                        if(_cache.currentIndex < 0) {
    _cache.currentIndex = plen - 1;
    }
    }
    if(_cache.currentIndex !== -1) {

    !$('.auto-tip .p-index'+_cache.currentIndex,parentNode).hasClass(_config.hoverBg) &&
    $('.auto-tip .p-index'+_cache.currentIndex,parentNode).addClass(_config.hoverBg).siblings().removeClass(_config.hoverBg);

    var curAttr = $('.auto-tip' + ' .p-index'+_cache.currentIndex,parentNode).attr('data-html');
    $(_config.targetCls,parentNode).val(curAttr);

    // 给隐藏域赋值
    $(_config.hiddenCls,parentNode).val(curAttr);
    }

    }else if(keyCode == 40) { //下移操作
    if(_cache.currentIndex == plen - 1) {
    _cache.currentIndex = 0;
    }else {
    _cache.currentIndex++;
    if(_cache.currentIndex > plen - 1) {
                            _cache.currentIndex = 0;
                        }
                    }

                    if(_cache.currentIndex !== -1) {

                        !$('.auto-tip .p-index'+_cache.currentIndex,parentNode).hasClass(_config.hoverBg) &&
                        $('.auto-tip .p-index'+_cache.currentIndex,parentNode).addClass(_config.hoverBg).siblings().removeClass(_config.hoverBg);

                        var curAttr = $('.auto-tip' + ' .p-index'+_cache.currentIndex,parentNode).attr('data-html');
                        $(_config.targetCls,parentNode).val(curAttr);
                        // 给隐藏域赋值
                        $(_config.hiddenCls,parentNode).val(curAttr);
                    }

                }else if(keyCode == 13) { //回车操作
                    var curVal = $('.auto-tip' + ' .p-index'+_cache.oldIndex,parentNode).attr('data-html');
                    $(_config.targetCls,parentNode).val(curVal);

                    // 给隐藏域赋值
                    $(_config.hiddenCls,parentNode).val(curVal);

                    if(_config.isSelectHide) {
                         !$(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).addClass('hidden');
                     }
                     _config.callback && $.isFunction(_config.callback) && _config.callback();

                    _cache.currentIndex = -1;
                    _cache.oldIndex = -1;

                }
            }
         },
         _keyCode: function(code) {
             var arrs = ['17','18','38','40','37','39','33','34','35','46','36','13','45','44','145','19','20','9'];
             for(var i = 0, ilen = arrs.length; i < ilen; i++) {
                 if(code == arrs[i]) {
                     return i;
                 }
             }
             return -1;
         },
        /**
          * 当数据相同的时 点击对应的项时 返回数据
          */
         _executeClick: function(parentNode) {

             var _self = this,
                 _config = _self.config;

             $('.auto-tip' + ' li',parentNode).unbind('click');
             $('.auto-tip' + ' li',parentNode).bind('click',function(e){
                  var dataAttr = $(this).attr('data-html');

    $(_config.targetCls,parentNode).val(dataAttr);
    if(_config.isSelectHide) {
    !$(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).addClass('hidden');
    }
    // 给隐藏域赋值
    $(_config.hiddenCls,parentNode).val(dataAttr) );
    _config.callback && $.isFunction(_config.callback) && _config.callback();

    });
    }
    };

    // 初期化
    $(function() {
    new EmailAutoComplete({});
    });

    関連ラベル：
    邮箱自动提示
    ソース：php.cn
    前の記事：JS 置換メソッド_JavaScript スキル 次の記事：jQuery1.8_jquery のいくつかの小さな変更の簡単な分析
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    強制更新は、Next.js の未定義のパスまたはエラー ページにアクセスした結果発生します。 未定義のパスまたはエラー ページにアクセスすると、Next.js がハード リフレッシュを実行し、コンテキストがデフォルトの状態に戻ります (つまり、userProfile 状態変...
    から 2024-04-05 08:32:46
    0
    1
    400
    PHPフォームのテキストエリアフィールドで携帯電話番号をトリミングして計算します フォームに携帯電話番号をコピーして貼り付けることができるテキストエリアフィールドがあります。 1 行に 1 つの番号を入力します。このように、何百もの携帯電話番号をコピーして貼り付...
    から 2024-03-31 08:46:11
    0
    1
    314
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート