我的自动逗号仅适用于第一个文本输入，但不适用于第二个答案

【问题标题】：my autocomma just works for the first text input but not the second我的自动逗号仅适用于第一个文本输入，但不适用于第二个
【发布时间】：2017-03-15 09:33:14
【问题描述】：

自动逗号只适用于第一个，但它不适用于第二个文本输入，请帮助我

<label>Price Range:</label>
          <label id="my-input">From<input type="text" name="price_range" class="textfield" required="required"/></label>
          <label id="my-input">To<input type="text" name="price_range2" class="textfield" required="required"/></label>

/* * 给数字添加逗号 * @方法 * @param {*} nStr 数字/字符串添加逗号 * @param {String} sep 自定义分隔符代替逗号 * @return {String} 加逗号的字符串 * @return String 加逗号的数字字符串 * @静止的 * @作者未知 */ String.addCommas = function (nStr, sep) { 如果 (nStr === 未定义) nStr = ''; var parts = nStr.toString().split('.'); if (!sep) sep = ','; 部分[0] = 部分[0].replace(/\B(?=(\d{3})+(?!\d))/g, sep); 返回parts.join('.'); };

var MoneyInput = {
    value: 0,
    el: null,
    textfield: null,
    max: Number.MAX_VALUE,
    min: 0,


    change: null,


    slider: null,


    create: function(el) {
        return Object.create(this).init(el);
    },


    init: function(el) {
        var _this = this,
            textfield = el.querySelector('.textfield'),
            pattern = /[0-9]/;

        if (el.classList.contains('inited')) return; //do not initialize the wrapper again

        el.classList.add('inited');

        this.min = parseFloat(el.dataset.min) || 0;
        this.max = parseFloat(el.dataset.max) || Number.MAX_VALUE;

        textfield.addEventListener('keypress', function(e) {
            var inputChar = String.fromCharCode(e.charCode);
            // console.log(inputChar, e.charCode);

            if (!pattern.test(inputChar)) {
                //invalid character, prevent input
                e.preventDefault();
            }

        });

        textfield.addEventListener('input', function(/*e*/) {
            _this._inputHandler();
        });

        textfield.addEventListener('click', function(/*e*/) {
            if (!_this.value) {
                textfield.value = '';
            }
        });

        textfield.addEventListener('blur', function(/*e*/) {
            _this._blurHandler();
        });

        this.textfield = textfield;
        this.el = el;
        return this; // for chaining
    },

    _inputHandler: function() {
        var textfield = this.textfield,
            el = this.el,
            str = textfield.value.replace(/,/g, ''),
            invalid = false,
            value = parseFloat(str) || 0;

        if (value < this.min && str) { value = this.min; invalid = true; }
        if (value > this.max) { value = this.max; invalid = true; }
        if (/^0+/.test(str)) {
            //if the text start with zeros
            invalid = true;
        }

        this.value = value;
        this.el.dataset.value = this.value;
        textfield.value = (invalid) ? String.addCommas(value) : String.addCommas(str);
        // console.log(textfield.value, this.value);
        //apply validation highlight for .money-input
        if (this.value) {
            el.classList.add('validated');
        } else {
            el.classList.remove('validated');
        }

        if (typeof this.change === 'function') this.change(this.value);
        if (this.slider && this.slider.setValue) this.slider.setValue(this.value);
    },

    _blurHandler: function() {
        //normalize number input (when there are more . in the strings)
        if (this.value) {
            this.setValue(this.value);
        } else {
            this.el.value = '';
        }
    },

    setValue: function(value) {
        if (isNaN(value)) value = 0;
        this.value = value;
        this.strValue = String.addCommas(value);
        this.textfield.value = this.strValue;
        this.el.dataset.value = this.value;
        if(this.value) {
            this.el.classList.add('validated');
        } else {
            this.el.classList.remove('validated');
        }
        // if(typeof this.change === 'function') this.change(this.value);
    },

    getValue: function() {
        return this.value;
    }
};


window.MoneyInput = MoneyInput;
})();

MoneyInput.create(document.querySelector('#my-input'));

【问题讨论】：

请注意格式化您的代码
我就是这么做的
看不到任何变化。仍然无法阅读。

标签： javascript html

【解决方案1】：

改用querySelectorAll() - 您当前的querySelector() 仅针对找到的第一个元素。检查https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

【讨论】：

我试过了，但它根本不起作用，即使是第一个