blob: d1c18b1605a4437236e9e19233c511b760ae1eff (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
---
title: PasswordField
order: 11
layout: page
---
[[components.passwordfield]]
= PasswordField
ifdef::web[]
[.sampler]
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/text-input/password-field"]
endif::web[]
The [classname]#PasswordField# is a variant of [classname]#TextField# that hides
the typed input from visual inspection.
[source, java]
----
PasswordField tf = new PasswordField("Keep it secret");
----
The result is shown in <<figure.components.passwordfield.basic>>.
[[figure.components.passwordfield.basic]]
.[classname]#PasswordField#
image::img/passwordfield-basic.png[width=40%, scaledwidth=50%]
You should note that the [classname]#PasswordField# hides the input only from
"over the shoulder" visual observation. Unless the server connection is
encrypted with a secure connection, such as HTTPS, the input is transmitted in
clear text and may be intercepted by anyone with low-level access to the
network. Also phishing attacks that intercept the input in the browser may be
possible by exploiting JavaScript execution security holes in the browser.
[[components.passwordfield.css]]
== CSS Style Rules
[source, css]
----
.v-textfield { }
----
The [classname]#PasswordField# does not have its own CSS style name but uses the
same [literal]#++v-textfield++# style as the regular [classname]#TextField#. See
<<dummy/../../../framework/components/components-textfield#components.textfield.css,"CSS Style Rules">> for information on styling it.
|
