JavaScript on input event

Question

我有一个带有CSS动画的表单，当选择表单字段时，标签会动画化，而当文本被填充时，标签不应该动画化。这适用于输入字段，但不适用于文本区域。似乎找不到问题，我已经玩了一段时间了。

这是我的JS代码：

    <script>
    (function() {
        // trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
        if (!String.prototype.trim) {
            (function() {
                // Make sure we trim BOM and NBSP
                var rtrim = /^[suFEFFxA0]+|[suFEFFxA0]+$/g;
                String.prototype.trim = function() {
                    return this.replace(rtrim, '');
                };
            })();
        }
        [].slice.call( document.querySelectorAll('input.input_field', 'input-textarea.input_field-textarea') ).forEach( function( inputEl ) {
            // in case the input is already filled..
            if( inputEl.value.trim() !== '' ) {
                classie.add( inputEl.parentNode, 'input--filled' );
            }
            // events:
            inputEl.addEventListener( 'focus', onInputFocus );
            inputEl.addEventListener( 'blur', onInputBlur );
        } );
        function onInputFocus( ev ) {
            classie.add( ev.target.parentNode, 'input--filled' );
        }
        function onInputBlur( ev ) {
            if( ev.target.value.trim() === '' ) {
                classie.remove( ev.target.parentNode, 'input--filled' );
            }
        }
    })();
</script>

编辑：这就是问题所在，代码是这样的：

 document.querySelectorAll('textarea.input_field-textarea', 'input.input_field'))

而不是删除那 2 个额外的"：

 document.querySelectorAll('textarea.input_field-textarea, input.input_field'))

感谢大家的帮助！

Answer 1

将input-textarea.input_field-textarea选择器更改为 textarea.input_field-textarea 。没有这样的<input-textarea/>元素：

[].slice.call(document.querySelectorAll('input.input_field', 'textarea.input_field-textarea')).forEach(function(inputEl) {
    // ...
});