javascript輸入焦點

<form id="commentform" method="post" action="wp-comments-post.php"> 
    <input type="text" aria-required="true" tabindex="1" size="22" value="" 
     id="author" name="author"> 
</form>

我在輸入框中設置了默認值「visitor」。當焦點位於文本框或mouose中時，我想要隱藏「訪客」字符串，並在焦點丟失或聚焦移動時顯示它。javascript輸入焦點

來源

2011-03-16 enjoylife

嘗試使用HTML5佔位符屬性：

<input type="text" aria-required="true" tabindex="1" size="22" 
    placeholder="visitor" id="author" name="author">

雖然瀏覽器的支持也不是100％到那一步，這會給你一個標準的方式來達到你想達到的目標，而無需通過不必要的籃球去。

您可以嘗試的另一件事是將輸入元素覆蓋在某些文本上，並使其在焦點/不填充時不透明/半透明和不透明。

截至今日，Tumblr的登錄頁面使用了這個方法：

<div class="input_wrapper" id=""> 
    <label for="user_password">Password</label> 
    <input type="password" id="user_password" name="user[password]" data-validation-type="password" value=""> 
</div>

通過CSS魔法變爲：

enter image description here

來源

2011-03-16 03:51:00

看起來你正在使用WordPress的，讓你有jQuery庫在您的網站上。

您可以使用我的jQuery plugin來實現此目的。

例

Example

jQuery的

$('#author').inputLabel({ 
    customLabel: 'Visitor' 
});

在這種情況下，我不得不指定標籤自己，但該插件沒有這種通過查找相關label元素的input工作，應該爲可訪問性而存在。

jsFiddle。

來源

2011-03-16 04:04:02 alex

如果你已經有（因爲WordPress的的，在這種情況下，）jQuery的真正良好的擴展性。添加到我的工具集。 – TheVillageIdiot 2011-03-16 04:13:31

@TheVillageIdiot非常感謝你的那些客氣話。隨時[聯繫我]（http：// www。alexanderdickson.com/contact/）關於任何問題。 – alex 2011-03-16 04:16:44

如果你是高達HTML 5還沒有那麼試試這個：

<script type="text/javascript"> 
var prompt="visitor";  
var txt=document.getElementById("author"); 
txt.onfocus=function(){txt.value='';} 
txt.onblur=function(){ 
      if(txt.value==''){ 
       txt.value=prompt; 
      } 
     } 
</script>

來源

2011-03-16 04:04:13 TheVillageIdiot

然而，這種方法的問題是它不能很好地進行驗證。 – alex 2011-03-16 04:07:10

@alex毫無疑問會驗證一些額外的工作，更重要的是如果用戶輸入相同的字符串（「訪問者」）。 – TheVillageIdiot 2011-03-16 04:10:58

阿泰古拉爾的回答看起來很有趣。請嘗試第一槍。這是一個替代如果你不想出汗.. :)
我會建議使用水印插件。有很多可用的。
之前使用過this plugin。工作得很好。給你很好的控制。
插件需要jQuery的

來源

2011-03-16 04:05:07 ZX12R

雖然我也可以使用jQuery或CSS和僞類（：焦點）....

下面是一個簡單的JS解決方案，它你是什麼之後。再說一遍，我不會推薦這種方法適用於一個或兩個輸入字段。

<input type="text" value="Visitor" onFocus="this.value='';" onBlur="this.value='Visitor';" id="author"/>

來源

2011-03-16 04:11:06 Dawson

javascript輸入焦點

回答

例

jQuery的

相關問題