カスタム テキスト入力フィールドの作成に取り組んでいますが、Internet Explorer 10 に表示される 1 行の入力に問題があります (他のバージョンはチェックしていません)。テキスト入力をクリックすると、入力の背景を「ここに名前を入力してください」という画像から、ユーザーが上に入力できるより空白の画像に切り替える onFocus が実行されます。そして、javascript は入力が空白かどうかを確認し、空白の場合は onBlur が「ここに名前を入力」画像に切り替えます。それ以外の場合は、より空白の画像のままになります。
これはすべて、Internet Explorer を除くすべてのブラウザーで適切に機能します。入力をクリックすると(カーソルを動かさないで)、背景が適切に変更されますが、ボタンを押して入力を開始すると、背景が「ここに名前を入力してください」に戻り、テキストが上に表示されます。テキストの。
これはおそらく想像しがたいことだと思いますので、www.cutephilosophy.com/contact&stuff.php で問題を確認してください。
問題は、Internet Explorer が「フォーカス」と「ぼかし」を他のブラウザーとは異なる方法でアクティブ化する必要があると考えていることのようです (もちろん、彼らは独自のことをしています..)。この問題を回避する方法を知っている人はいますか? onFocus の代わりに onClick を試してみましたが、同じです。また、問題を力ずくで解決するために、マウスアウトまたはマウスオーバーで強制的に実行しようとしましたが、何も機能していないようです。
<---------- 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')"/>