Question

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

这是我的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 = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/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'))

而不是删除那些额外的''：

 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) {
    // ...
});

关于输入事件的JavaScript

1 个答案: