使背景在用户输入上消失.CSS

Question

如果我有此代码：

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

如果用户输入文本框中的某些内容，我该如何使背景消失。

Answer 1

您可以使用输入事件：

// 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/

如果您需要支持，则可以做这样的事情：

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/

Answer 2

<input style="background: src(mybackgroundimage.png) no-repeat right" type="text" onchange="bg(this)">
<script>
    function bg(obj) { obj.style.background = "none"; }
</script>

Answer 3

由于这仍然出现在Google上一块html。

<input type="text" id="myinput" placeholder="search..." />

占位符现在是现代浏览器的标准配置，因此这确实是首选方法。

<input name="Name" value="Enter Your Name"
       onfocus="(this.value == 'Enter Your Name') && (this.value = '')"
       onblur="(this.value == '') && (this.value = 'Enter Your Name')" />

工作小提琴

Answer 4

您可以观看键盘活动的输入并切换背景样式：

<input type="text" style="background: green"  onkeyup="modifyBackground(this)">
function modifyBackground(elem){
    if( elem.value !== "" ){
        elem.style.background = "gray";
    } else {
        elem.style.background = "green";
    }
}

小提琴

或使用jQuery：

$('input').keyup(function(e){
    if($(this).val() !== ""){
        $(this).css('background','gray');
    } else {
        $(this).css('background','green');
    }
}).trigger('keyup');

再次清空时，这将正确重置背景，并将触发页面加载函数，以便自动设置其默认颜色。

小提琴

Answer 5

您也可以尝试。

function disappearImg(inputElem){
    inputElem.style.backgroundImage= "none";
}
</script>
<input type="text" onkeydown="disappearImg(this)" style="background: src(mybackgroundimage.png) no-repeat right">