如何擺脫從標籤接管的密碼字段的佔位符

我無法擺脫密碼文本框上不需要的佔位符（或水印）。當密碼文本框的重點是，Android網絡瀏覽器顯示的佔位符從相關標籤元素取代，就像這樣：如何擺脫從標籤接管的密碼字段的佔位符

enter image description here

HTML源代碼：

<form method="post"> 
    <label for="userName">Login name:</label> 
    <input id="userName" name="userName" type="text" value="" /> 

    <label for="password">Password:</label> 
    <input id="password" name="password" type="password" /> 

    <input type="submit" id="submit" name="submit" value="Log In" /> 
</form>

注：顯示

佔位符只有當文本框有焦點並且是空的。
在密碼輸入中使用「佔位符」HTML屬性時，僅在密碼獲得焦點時才顯示。當它收到焦點時，它會顯示標籤文字。
我不想刪除標籤的「for」屬性。我希望標籤可以點擊，密碼文本框可以在點擊標籤時獲得焦點。

編輯：

嘗試另一種變體（以避免「爲」屬性），但佔位仍然存在：

<label>Password: <input id="password" name="password" type="password" /></label>

來源

2011-07-26 dkl

嘿「DKL」 - 你有沒有解決這個問題？我們在某些android瀏覽器的某些頁面上看到類似的問題。 – Daryl

號我刪除了「for」屬性，但這不是一個修復，這只是一個解決方法。 – dkl

我認爲你需要在Android上的佔位符。對於使用EDITTEXT的財產

機器人：提示=「用戶名」

<EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textNoSuggestions" android:id="@+id/textName" android:hint="Username"></EditText> 
<EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textEmailAddress" android:id="@+id/textEmail" android:hint="Email"></EditText>

來源

2011-07-26 10:05:20

這不是原生的android應用程序;它是一個普通的HTML網頁，訪問標準的Android瀏覽器 – dkl

好吧，那麼我認爲你必須使用javascript或jquery –

你需要做的，以防止這是設置標籤「的」屬性是其他的東西是什麼比'密碼'。您還可以將輸入的「名稱」屬性更改爲「密碼」以外的內容。這兩者都似乎阻止Android將標籤作爲佔位符。

來源

2011-10-12 16:11:51 CodeTheInternet

那麼，但我需要保留標籤的功能。當我不使用「for」屬性時，當我點擊標籤時，密碼文本框不會被聚焦。 – dkl

似乎不可能將樣式應用於「聚焦」密碼字段，因爲實際上它是絕對定位在原始輸入上的另一個輸入實例。所以當密碼欄位處於焦點時，有兩個字段。

我設法通過JavaScript的幫助刪除這段文本。這個想法是暫時從DOM中刪除相應的<標籤>，然後在恢復之後。

的代碼如下：

var field = document.getElementById('password'); 
var label = document.querySelector('label[for="password"]'); 
field.onfocus = function() { 
    label.parentNode.removeChild(label); 
    setTimeout(function(){ 
     field.parentNode.insertBefore(label, field); 
    },1000); 
}

爲setTimeout的小延遲不工作。我認爲延遲這是設備/系統特定的。也許對矯正label.innerHTML或其他一些技巧也可以幫助刪除該文本;）

來源

2011-11-02 11:16:46 Inferpse

以下CSS可以禁用此：

-webkit-user-modify: read-write-plaintext-only;

來源

2012-07-11 06:06:42 emjaksa

如何擺脫從標籤接管的密碼字段的佔位符

回答

相關問題