Directory

← Back

MasketField

Mask Input Field on client site to control inputs

Author

Rating

Popularity

<100

Is a component to filter inputs on the client using a mask on input field.

This component may have two values with respect to the mask and ask if it is valid.

  • getValue() get only characters (no separators).
  • getMaskText() get all text with separators.
  • isValid() check if complete.

How to use

  • # allow only numbers
  • A allow only capital letters
  • a allow only no capital letters
  • B allow capital and no capital letters
  • C allow capital letters, no capital letters and numbers

Separators

Can use all of those character to separate

/,*.-:(){}=+

You can add a white space for separator

Example

###-###

Result: 123-123

AA*AA

Result: FV*VB

Sample code

package com.alsnightsoft.vaadin;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.TextField;

@SuppressWarnings("serial")
@Theme("masketfield")
public class MasketfieldUI extends UI {

	@WebServlet(value = "/*", asyncSupported = true)
	@VaadinServletConfiguration(productionMode = false, ui = MasketfieldUI.class, widgetset = "com.alsnightsoft.vaadin.MasketfieldWidgetset")
	public static class Servlet extends VaadinServlet {
	}

	@Override
	protected void init(VaadinRequest request) {
		final VerticalLayout layout = new VerticalLayout();
		layout.setSizeFull();
		layout.setMargin(true);
		setContent(layout);

		final MaskedField maskedField = new MaskedField("#-###", "Example Masked Field Required");
		maskedField.setRequired(true);
		maskedField.setValue("8888");
		
		final MaskedField maskedField2 = new MaskedField("#-###-###-####", "Example Masked Field Read only");
		maskedField2.setReadOnly(true);
		
		final MaskedField maskedField3 = new MaskedField("#-###-###-####", "Normal");
		maskedField3.setSizeFull();

		final TextField tfMask = new TextField("Mask");
		final TextField tfData = new TextField("Data");

		final Button btnChangeMask = new Button("Asing mask");
		btnChangeMask.addClickListener(new Button.ClickListener() {
			@Override
			public void buttonClick(ClickEvent event) {
				maskedField.setMask(tfMask.getValue());
			}
		});
		
		final Button btnResult = new Button("Get Result");
		btnResult.addClickListener(new Button.ClickListener() {
			@Override
			public void buttonClick(ClickEvent event) {
				tfData.setValue(maskedField.getValue());
				System.out.println("Get value: " + maskedField.getValue());
				System.out.println("Get Mask Text: " + maskedField.getMaskText());
				System.out.println("Get Mask: " + maskedField.getMask());
				System.out.println("Is valid? " + maskedField.isValid());
				tfData.setValue(maskedField.getMaskText());
			}
		});

		layout.addComponent(maskedField);
		layout.addComponent(maskedField2);
		layout.addComponent(maskedField3);
		layout.addComponent(tfMask);
		layout.addComponent(btnChangeMask);
		layout.addComponent(btnResult);
		layout.addComponent(tfData);
	}

}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Now apply CSS. Fix bug on isValid. New constructors (some parameters change)

Released
2016-03-21
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.6+
Browser
Internet Explorer
Internet Explorer
Internet Explorer
Firefox
Opera
Safari
Google Chrome
Internet Explorer
Internet Explorer
Internet Explorer

MasketField - Vaadin Add-on Directory

Mask Input Field on client site to control inputs MasketField - Vaadin Add-on Directory
Is a component to filter inputs on the client using a mask on input field. This component may have two values with respect to the mask and ask if it is valid. * getValue\(\) get only characters (no separators). * getMaskText\(\) get all text with separators. * isValid\(\) check if complete. # How to use * \# allow only numbers * A allow only capital letters * a allow only no capital letters * B allow capital and no capital letters * C allow capital letters, no capital letters and numbers ## Separators Can use all of those character to separate ### \/,\*\.\-:\(\)\{\}=\+ You can add a white space for separator # Example \#\#\#-\#\#\# ## Result: 123-123 AA\*AA ## Result: FV*VB
Online