Cách loại bỏ trình giữ chỗ trên trường mật khẩu được lấy từ nhãn

Question

Tôi không thể loại bỏ trình giữ chỗ không mong muốn (hoặc hình mờ) trên hộp văn bản của mật khẩu. Khi hộp mật khẩu được tập trung, màn hình trình duyệt web Android placeholder vượt qua từ yếu tố nhãn đi kèm, như thế này: nguồn

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> 

Lưu ý:

• Placeholder được hiển thị chỉ khi hộp văn bản có tiêu điểm và trống.
• Khi sử dụng thuộc tính HTML "trình giữ chỗ" trên nhập mật khẩu, nó chỉ được hiển thị cho đến khi mật khẩu được tập trung. Khi nó nhận được tiêu điểm, nó sẽ hiển thị văn bản nhãn thay thế.
• Tôi không muốn xóa thuộc tính "cho" của nhãn. Tôi muốn nhãn có thể nhấp và hộp văn bản mật khẩu để lấy tiêu điểm khi nhãn được nhấp.

Edit:

Cố gắng một biến thể (mà tránh "cho" thuộc tính), nhưng giữ chỗ vẫn còn hiện diện:

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

Answer 1

Tôi nghĩ rằng bạn cần giữ chỗ trong android. Đối với sử dụng tài sản của EditText

android: gợi ý = "Tên đăng nhập"

<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> 

Answer 2

Những gì bạn cần phải làm gì để ngăn chặn điều này là để thiết lập nhãn 'cho' thuộc tính là một cái gì đó khác hơn 'mật khẩu'. Bạn cũng có thể thay đổi thuộc tính 'tên' của đầu vào thành một cái gì đó khác với 'mật khẩu'. Cả hai dường như ngăn Android đưa nhãn vào như một trình giữ chỗ.

Answer 3

Dường như không thể áp dụng kiểu trên trường mật khẩu "tập trung" vì thực tế nó là một cá thể đầu vào khác được định vị hoàn toàn trên đầu vào gốc. Vì vậy, có hai trường khi trường mật khẩu được lấy nét.

Tôi đã quản lý để xóa văn bản này với sự trợ giúp của JavaScript. Ý tưởng là tạm thời xóa < nhãn tương ứng > khỏi DOM và sau đó khôi phục nó sau một thời gian.

Mã sẽ trông giống như:

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); 
} 

chậm trễ nhỏ cho setTimeout không hoạt động. Tôi nghĩ rằng sự chậm trễ cho điều này là thiết bị/hệ thống cụ thể. lẽ modifing label.innerHTML hoặc một số thủ thuật khác cũng có thể giúp loại bỏ văn bản này;)

Answer 4

css sau đây có thể vô hiệu hóa này:

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