入力フィールド onfocus をクリアし、空の場合はデフォルトのテキスト onblur にリセットする関数をいくつか作成する際に問題が発生しています。テキストの一部を変更してからバックスペースアウトするまでは正常に機能します。
私の機能は次のとおりです。
function enterField (id, defaultText) {
if (document.getElementById(id).value == defaultText) {
document.getElementById(id).setAttribute("value", "");
document.getElementById(id).style.color = "#000000";
}
}
function leaveField (id, defaultText) {
if (document.getElementById(id).value == "" || document.getElementById(id).value == defaultText) {
document.getElementById(id).setAttribute("value", defaultText);
document.getElementById(id).style.color = "#dddddd";
}
}
そして、私のhtmlは次のとおりです。
<table style="width: 464px; margin-right: -7px; margin-left: -7px; table-layout: fixed;" cellpadding="0" cellspacing="8">
<tr>
<td class="input"><input id="name" type="text" class="name" size="32" value="Name" onfocus="enterField('name', 'Name');" onblur="leaveField('name', 'Name');"></td>
<td class="input"><input id="email" type="text" class="name" size="32" value="Email" onfocus="enterField('email', 'Email');" onblur="leaveField('email', 'Email');"></td>
</tr>
<tr>
<td class="input" colspan="2"><textarea id="message" class="message" rows="8" onfocus="enterField('message', 'Message');" onblur="leaveField('message', 'Message');">Message</textarea></td>
</tr>
<tr>
<td style="text-align: right;" colspan="2"><input id="submit" type="submit" class="button" value="Send"></td>
</tr>
</table>
www.ag-designs.ca/index_new.phpでその動作を確認できます。下部にある「Let's Talk」をクリックします。