1

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

这一切都适用于除 Internet Explorer 之外的所有浏览器。如果您单击输入（并且不移动光标），它会正确更改背景，但是当您点击按钮开始输入时，它会将背景切换回“在此处输入名称”并且您最终会在顶部显示文本的文本。

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

似乎问题在于 Internet Explorer 认为“Focus”和“Blur”的激活方式应该与其他浏览器不同（当然它们是在做自己的事情..）。有谁知道我该如何解决这个问题？我已经尝试过 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')"/>
4

0 回答 0