javascript - 使背景在用户输入时消失。 CSS

Question

如果我有这段代码:

<input style="background: src(mybackgroundimage.png) no-repeat right" type="text">

如果用户在文本框中输入内容，如何让背景消失。

Answer 1

您可以使用 input事件:

// Assuming: <input class="inp" id="inp" type="text">
document.getElementById('inp').addEventListener('input', function() {
    if (this.value) {
        this.style.background = 'none';
    }
}, false);

注:IE9+。

演示:http://jsfiddle.net/N3kaR/

如果您需要 ie 支持，您可以这样做:

var inp = document.getElementById('inp');
inp.addEventListener('change', clearBackground, false);
inp.addEventListener('paste', clearBackground, false);
inp.addEventListener('keyup', clearBackground, false);

function clearBackground() {
    this.style.background = 'none';
}

演示:http://jsfiddle.net/N3kaR/1/