Cách đặt tự động điền = "tắt" trong vaadin

Question

Có thể đặt thuộc tính HTML5 autocomplete="off" trên TextField trong Vaadin 7 không? Tôi đã tìm kiếm nhưng không tìm thấy cách nào để đặt thuộc tính trên các trường văn bản hoặc chỉ gợi ý trình duyệt để vô hiệu hóa tính năng tự động hoàn thành gốc trên các trường nhập theo cách khác trong vaadin.

Answer 1

Tôi nghĩ rằng cách duy nhất nếu bạn sử dụng javascript:

TextField tf = new TextField(); 
tf.addStyleName("xyz"); 
JavaScript.getCurrent().execute(
    "document.getElementsByClassName('xyz')[0].setAttribute('autocomplete', 'off')"); 

Answer 2

Mở rộng TextField ...

package com.example; 
import com.vaadin.ui.TextField; 

public class MyTextField extends TextField { 
    // do other customization here as needed 
} 

... và - là những gì các trọng điểm đây - khách hàng- của nó side Connector

package com.example.client; 

import com.vaadin.client.ui.VTextField; 
import com.vaadin.client.ui.textfield.TextFieldConnector; 
import com.vaadin.shared.ui.Connect; 

@Connect(com.example.MyTextField.class) 
public class MyTextFieldConnector extends TextFieldConnector { 

    @Override 
    public VTextField getWidget() { 
     VTextField vTextField = super.getWidget(); 
     vTextField.getElement().setAttribute("autocomplete","off"); 
     return vTextField; 
    } 

} 

Đừng quên biên dịch lại bộ tiện ích con.

Answer 3

Nếu bạn sử dụng Viritin add-on, bây giờ bạn có thể sử dụng lớp HtmlElementPropertySetter để bọc thành phần TextField của bạn và sử dụng để đặt thuộc tính phần tử "tự động hoàn thành" thành "tắt". Bạn cũng có thể sử dụng thành phần MTextField đi kèm với Viritin và chỉ cần tạo nó như sau:

MTextField username = new MTextField("Username") 
     .withAutocompleteOff(); 

Answer 4

Đây là phần mở rộng cho câu trả lời của @Wojciech Marciniak. Cách tiếp cận của ông đã làm việc cho tôi, nhưng tôi muốn lưu ý một vài hoặc ba sửa đổi tôi đã phải làm để cho nó làm việc như của 2017/11/28.

1) autocomplete="off" dường như không hoạt động nữa hiện nay; ít nhất không phải trên Chrome. Thay vào đó, bạn có thể sử dụng autocomplete="new-password", hoạt động trên các cửa sổ Chrome 62.0.3202.94 64 bit. Tôi cũng nhận thấy một số hành vi không nhất quán với thuộc tính này, vì KHÔNG phải lúc nào cũng hoạt động - đôi khi danh sách có các lựa chọn cho mật khẩu sẽ hiển thị trên thành phần (đặc biệt cho đến khi bạn làm mới vài lần, v.v.).

2a) Thay vì mở rộng thành phần, bạn có thể ghi đè lên bằng cách tạo gói com.vaadin.client.ui.(component)field trong dự án của mình, sau đó đặt tệp (component)FieldConnector.java đã sửa đổi trong trường hợp bạn muốn sửa đổi PasswordField) trong trường hợp bạn muốn tất cả các trường hợp của thành phần này để không nhớ mật khẩu. Nguồn lớp học cuối cùng sẽ trông giống như sau:

package com.vaadin.client.ui.passwordfield; 

import com.vaadin.client.ui.VPasswordField; 
import com.vaadin.client.ui.textfield.TextFieldConnector; 
import com.vaadin.shared.ui.Connect; 
import com.vaadin.ui.PasswordField; 

@Connect(PasswordField.class) 
public class PasswordFieldConnector extends TextFieldConnector { 

    @Override 
    public VPasswordField getWidget() { 
     VPasswordField vTextField = (VPasswordField) super.getWidget(); 
     vTextField.getElement().setAttribute("autocomplete","new-password"); 
     return vTextField; 
    } 
} 

Vì vậy, theo cách này bạn không cần bất kỳ lớp mở rộng TextField khác (hoặc Mật khẩu).

2b) Nếu bạn muốn cho phép một số trường ghi nhớ mật khẩu và các trường khác không nhớ, bạn có thể mở rộng thành phần và sử dụng thành phần ưu tiên của bạn cho phù hợp. Bạn có thể giữ lớp kết nối của bạn như trong 2a) nhưng hãy nhớ đặt tên cho nó là CustomPasswordFieldConnector và nó cũng phải là @Connect với lớp CustomPasswordField.class đó, đặt lớp đó ở bất kỳ đâu trong dự án của bạn và nhớ thêm import thích hợp cho nó kết nối trong trường hợp cần thiết. Lớp này chỉ là một lớp giả - bạn có thể để trống nội dung của nó trong trường hợp bạn không cần thêm bất kỳ chức năng nào (nhưng hãy nhớ nó sẽ mở rộng thích hợp (component)Field; PasswordField trong ví dụ).