在文本輸入中實現提示

我有一個帶有一些文本輸入的表單：登錄名，密碼。在文本輸入中實現提示

如果用戶第一次看到這個表單，輸入文本應該「包含」提示，如「輸入登錄名」，「輸入密碼」。

如果用戶點擊文本輸入，它的提示應該消失以允許輸入。

我已經看到了各種例子，它使用背景圖像與預渲染文本。

這些圖像出現在用下面的jQuery：

$("form > :text").focus(function(){ 
    // hide image 
}).blur(function(){ 
    // show image, if text-input is still empty 
    if ($(this).val() == "") 
     // show image with prompt 
});

這種方法有以下問題：

本地化是不可能
需要預渲染各種文字提示圖片
帶有加載圖像的開銷

你如何克服這樣的問題？

來源

2010-06-16 AntonAL

這通常稱爲「佔位符」，並且現在可以在多個瀏覽器中運行。

退房A Form of Madness: Placeholder Text：

<form> 
    <input name="q" placeholder="Search Bookmarks and History"> 
    <input type="submit" value="Search"> 
</form>

而對於那些不支持它的瀏覽器，這裏將使用該文本來模擬相同的效果一個JavaScript（jQuery的）墊片：jquery-html5-placeholder-shim。如果您添加了Shim的引用，只需將它添加到您的JavaScript中即可。

$(function(){ 
    $.placeholder.shim(); 
});

至於本土化的問題，只要你與placeholder內正確的信息生成HTML屬性，你應該罰款。

來源

2010-06-16 22:21:43 artlung

你爲什麼要簡化，只是尤斯是這樣的：

<input type="text" name="username" value="Your User Name" onfocus="if (this.value=='Your User Name') this.value = ''">

如果用戶焦點放在上一個輸入，它會刪除默認的文字，讓寫一些新鮮的:)

來源

2010-06-16 22:04:27 Zuul

因爲Zuul可以提交.value，並且可能會繞過表單完成規則和要求，而用戶不需要輸入任何內容。佔位符是一個較爲柔和的值，如果用戶未將其聚焦，表單將不會將其識別爲實際值。

一個簡單的解決方案，結合了你的答案，更直接地解決了提問者的問題可能是這樣的：如果取消無輸入時選擇/重點領域

這將清除佔位符文本，並返回佔位符文本目前在該領域取消時：

<input type="text" placeholder="1866" onFocus="if (this.placeholder=='1866') this.placeholder = ''" onBlur="if (placeholder=='') this.placeholder='1866'">

這將清除佔位符文本，只有當該領域的用戶類型，但在此之前：

<input type="text" placeholder="1492">

這個版本不需要額外的工作如預期。

乾杯。

來源

2013-07-23 02:06:50 Kreidol

在文本輸入中實現提示

回答

相關問題