首页 > 解决方案 > 如何使用 IntlPhoneInput 插件删除电话号码

问题描述

我试图删除 Javascript 文件中的电话号码<span class="dial-code">+60</span>,但电话号码仍然出现在下拉列表中。

带有电话号码的国家国旗

即使我试图删除CSS和JS文件,它仍然可以显示带有电话号码的国家标志。我不知道为什么仍然可以加载带有国旗和电话号码的下拉列表。有什么方法可以去掉电话号码?我只想在下拉列表中显示国旗。

国际电话输入.php

<?php

class IntlPhoneInput extends CInputWidget
{
        public $options;

        public $localisedCountryNames=true;

        public $E164=true;

        private $utilsScript;


        public function run()
        {
                list($name, $id)=$this->resolveNameID();
                if(!isset($this->htmlOptions['id']))
                        $this->htmlOptions['id']=$id;
                if(!isset($this->htmlOptions['name']))
                        $this->htmlOptions['name']=$name;

                $this->registerClientScript();

                if($this->hasModel()) {
                        $value=$this->model->{$this->attribute};
                        echo CHtml::activeHiddenField($this->model, $this->attribute);
                }
                else {
                        $value=$this->value;
                        echo CHtml::hiddenField($this->htmlOptions['name'], $this->value);
                }
                $htmlOptions=$this->htmlOptions;
                unset($htmlOptions['id'], $htmlOptions['name']);
                echo CHtml::hiddenField('intl-phone-input', $value, $htmlOptions);
        }


        private function registerClientScript()
        {
                $assets=Yii::app()->getAssetManager()->publish(dirname(__FILE__) . '/build');
                $lib=Yii::app()->getAssetManager()->publish(dirname(__FILE__) . '/lib');
                $this->utilsScript=$lib . '/libphonenumber/build/utils.js';

                // Configures JavaScript
                $config=$this->config();
                $options=CJavaScript::encode($config);
                $js="jQuery('#intl-phone-input').intlTelInput({$options});";

                $clone='val()';
                if($this->E164 === true)
                        $clone='intlTelInput(\'getNumber\')';
                $js.="jQuery('#intl-phone-input').change(function() {
                        jQuery('#{$this->htmlOptions['id']}').val(jQuery(this).{$clone});
                });";

                if($this->localisedCountryNames === true) {
                        $js.="var countryData = $.fn.intlTelInput.getCountryData();
                        $.each(countryData, function(i, country) {
                                country.name = country.name.replace(/.+\((.+)\)/,'$1');
                        });";
                }

                // Add other JavaScript methods to $js.
                // See https://github.com/Bluefieldscom/intl-tel-input#public-methods
                // See https://github.com/Bluefieldscom/intl-tel-input#static-methods

                $cs=Yii::app()->getClientScript();
                $cs->registerCssFile($assets . '/css/intlTelInput.css');
                $cs->registerScriptFile($assets . '/js/intlTelInput.min.js');
                $cs->registerScript(__CLASS__ . '#' . $this->htmlOptions['id'], $js);
        }


        private function config()
        {
                // Predefined settings.
                $options=array(
                        'onlyCountries' => ['sg', 'my', 'other'],
                        'responsiveDropdown' => true,
                        'nationalMode' => false,
                        'autoHideDialCode' => true,
                );
                // Client options
                if(is_array($this->options)) {
                        foreach($this->options as $key => $value)
                                $options[$key]=$value;
                }
                // Specifies/overwrites the path to the included "utils.js" script
                $options['utilsScript']=$this->utilsScript;
                return $options;
        }

}

intlphoneinput.js

        _appendListItems: function(countries, className) {
            // we create so many DOM elements, I decided it was faster to build a temp string
            // and then add everything to the DOM in one go at the end
            var tmp = "";
            // for each country
            for (var i = 0; i < countries.length; i++) {
                var c = countries[i];
                // open the list item
                tmp += "<li class='country " + className + "' data-dial-code='" + c.dialCode + "' data-country-code='" + c.iso2 + "'>";
                // add the flag
                tmp += "<div class='flag " + c.iso2 + "'></div>";
                // and the country name and dial code
                tmp += "<span class='country-name'>" + c.name + "</span>";
                tmp += "<span class='dial-code'>+" + c.dialCode + "</span>";
                // close the list item
                tmp += "</li>";
            }
            this.countryList.append(tmp);
        },

标签: javascriptphpyii1.x

解决方案


推荐阅读