Question

我正在制作自定义文本输入字段，而我在使用Internet Explorer 10中显示的单行输入时遇到问题（尚未检查其他版本）。单击文本输入时，它会执行onFocus，它应将输入背景从“此处键入名称”的图像交换为用户可以在其上键入的更多空白图像。并且javascript检查输入是否为空白，如果是，那么onBlur会将其切换回“此处输入名称”图像，否则它将保留在更空白的图像上。

除了Internet Explorer之外，所有浏览器都可以使用。如果你点击输入（并且不移动光标），它会正确地改变背景，但是当你点击一个按钮开始输入时，它会将背景切换回“在这里输入名字”，你最终会在上面输入文字文本。

我知道这可能很难想象，所以请随时查看这里的问题www.cutephilosophy.com/contact&stuff.php。

似乎问题是，互联网资源管理器认为“焦点”和“模糊”应该以不同于其他浏览器的方式激活（当然，他们正在做自己的事情......）。有谁知道如何解决这个问题？我试过onClick而不是onFocus并且它是相同的，我也尝试强制它在mouseout或mouseover上做事情以强制解决问题，但似乎没有任何工作。

<---------- CSS -------------------------------->
    .nameDiv{
        height:59px;
        width:582px;
        background:url("images/contact/nameField.gif");
        background-repeat: no-repeat;
        background-position: left top;
    }
    .nameInput{
        background:transparent;
        background-repeat: no-repeat;
        border:none;
        width:235px;
        height:59px;
        outline:none;
        background-color:transparent;
        font-family: 'avenirheavy';
        font-size:21px;
        color:#FFFFFF;
        padding-left:95px;
        padding-bottom:5px;
    }

<----------JAVASCRIPT-------------------------------->
    function nameSwap(image){
     var nameInput = document.getElementById('nameInput');
        if(nameInput.value == ""){
          nameInput.style.background = "url(images/contact/"+image+")";
        }
    }

<----------HTML TEXT FIELD --------------------------------> 
        <input name="nameInput" type="text" class="nameInput" id="nameInput" onfocus="nameSwap('nameFieldType.gif')" onblur="nameSwap('nameField.gif')"/>

onBlur / onFocus仅在Internet Explorer中未在适当的时间注册

0 个答案: