当前位置：首页 > JavaScript

js实现pleacehoder

2026-04-05 06:06:23JavaScript

在JavaScript中实现占位符（placeholder）功能，可以通过多种方式完成，以下是常见的实现方法：

使用HTML5原生属性

HTML5的<input>和<textarea>元素原生支持placeholder属性，无需额外JavaScript代码：

<input type="text" placeholder="请输入内容">

兼容旧浏览器的Polyfill

对于不支持HTML5 placeholder的旧浏览器（如IE8及以下），可通过JavaScript模拟实现：

// 检测浏览器是否支持placeholder
function supportsPlaceholder() {
    return 'placeholder' in document.createElement('input');
}

// 若不支持，则模拟实现
if (!supportsPlaceholder()) {
    var inputs = document.getElementsByTagName('input');
    Array.prototype.forEach.call(inputs, function(input) {
        if (input.type === 'text' && input.getAttribute('placeholder')) {
            var placeholderText = input.getAttribute('placeholder');

            // 初始设置
            input.value = placeholderText;
            input.style.color = '#999';

            // 聚焦时清除占位文本
            input.addEventListener('focus', function() {
                if (this.value === placeholderText) {
                    this.value = '';
                    this.style.color = '';
                }
            });

            // 失焦时恢复占位文本
            input.addEventListener('blur', function() {
                if (this.value === '') {
                    this.value = placeholderText;
                    this.style.color = '#999';
                }
            });
        }
    });
}

使用CSS伪类辅助

现代浏览器可通过CSS的:placeholder-shown伪类定制样式，但JavaScript仍需处理值逻辑：

input:placeholder-shown {
    color: #999;
    font-style: italic;
}

封装为可复用函数

将功能封装为独立模块，便于维护：

js实现pleacehoder

function initPlaceholderPolyfill(selector) {
    if (supportsPlaceholder()) return;

    document.querySelectorAll(selector).forEach(function(el) {
        const placeholder = el.getAttribute('placeholder');
        if (!placeholder) return;

        el._placeholderActive = true;
        el.value = placeholder;
        el.classList.add('placeholder-text');

        el.addEventListener('focus', handleFocus);
        el.addEventListener('blur', handleBlur);
    });

    function handleFocus(e) {
        if (e.target._placeholderActive) {
            e.target.value = '';
            e.target._placeholderActive = false;
            e.target.classList.remove('placeholder-text');
        }
    }

    function handleBlur(e) {
        if (e.target.value === '') {
            e.target.value = e.target.getAttribute('placeholder');
            e.target._placeholderActive = true;
            e.target.classList.add('placeholder-text');
        }
    }
}

// 使用示例
document.addEventListener('DOMContentLoaded', function() {
    initPlaceholderPolyfill('input[placeholder], textarea[placeholder]');
});