使用户输入背景消失。 CSS

Question

如果我有这段代码：

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

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

Answer 1

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

<script>
    function bg(obj) { obj.style.background = "none"; }
</script>

Answer 2

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

<input type="text" style="background: green"  onkeyup="modifyBackground(this)">

function modifyBackground(elem){
    if( elem.value !== "" ){
        elem.style.background = "gray";
    } else {
        elem.style.background = "green";
    }
}

Fiddle

或者使用jQuery：

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

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

Fiddle

Answer 3

由于这仍然出现在谷歌上，我想指出，使用HTML 5，你可以使用带有输入的占位符属性来实现这一点。

<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')" />

Working Fiddle

Answer 4

您可以使用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/

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

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 5

您也可以试试这个。

function disappearImg(inputElem){
    inputElem.style.backgroundImage= "none";
}
</script>

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