Text input Drop

Include the Moov text input Drop with the Moov form Drop to securely and seamlessly submit sensitive user data to Moov.

Combine the moov-text-input with the moov-form to submit sensitive user data to Moov. With the moov-text-input element, information entered by the user is captured by iframes and hidden from the customer’s website.

Cardholder name

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<moov-form
  name="demo-form"
  method="PATCH"
  action="/accounts/{accountID}/cards/{cardID}"
></moov-form>
<section>
  <label>Cardholder name</label>
  <moov-text-input
    formname="demo-form"
    name="holderName"
    required
    pattern="[a-zA-Z]+"
  ></moov-text-input>
</section>

Moov Drops require a secure HTTPS connection. If you don’t have a test environment with HTTPS enabled, we suggest setting up a hosting environment with ngrok, Netlify, or Vercel.

Properties

Properties can be accessed through JavaScript using a reference to the moov-text-input element.

Property	Type	Required	Description
`name`	String	✓	The name of the input. The input value is merged into the request body using this name. For example, the input name `expiration.month` would result in a request body of `{ expiration: { month: "inputValue" } }`.
`formName`	String	✓	The name of the form to which this text input is registered
`inputmode`	String		Prompts the users device to display certain keyboards, and restricts the allowed characters in the input.
`value`	String		The value of the input. Writeable, but not readable. User input will override this value.
`defaultValue`	String		The default value of the input on first load.
`disabled`	Boolean		If `true`, this input is disabled, preventing user input.
`required`	Boolean		If `true`, this input is required for form submission.
`autocomplete`	Boolean		If `true`, enables browser autocomplete features on this input.
`maxLength`	Number		Maximum number of characters allowed in this input.
`minLength`	Number		Minimum number of characters allowed in this input.
`pattern`	String		A regex string specifying the expected structure for this input’s value.
`placeholder`	String		Placeholder text displayed when the input has no value.
`readOnly`	Boolean		If `true`, the input value cannot be edited by a user.
`size`	Number		Expected number of characters in this input.
`inputStyle`	Object		A record of camelCased CSS variables, passed to the input element within the iframe. For developer convenience, inheritable styles such as color, font-size, and font-family are applied automatically.
`validationMessage`	String		Read only. The human-readable message displayed to the user when this input is invalid.
`validity`	Object		Read only. A `ValidityState` object. Details whether or not the input is valid and which validations (if any) are passing.
`willValidate`	Boolean		Read only. Returns true if this input has any attached validators.
`onInput`	Function		Fired when the user changes the input value. No arguments.
`onChange`	Function		Fired when the user navigates away from the input. No arguments.
`onFocus`	Function		Fired when the user focuses the input. No arguments.
`onBlur`	Function		Fired when the input loses focus. No arguments.
`onInvalid`	Function		Fired when the input fails a validation check.
`onEnterKeyPress`	Function		Fired when the user presses the enter key while focusing the input
`onCheckValidity`	Function		Fired after a validity check runs on the input. Passes `isValid` as an argument.
`onReportValidity`	Function		Fired after a validity report runs on the input. Passes `isValid` as an argument.

How to set a property

1
2


const input = document.querySelector('moov-text-input');
input.name = 'demoInput';

1
2
3
4
5


const input = document.querySelector('moov-text-input');
input.inputStyle = {
  fontSize: "14px",
  color: "blue",
};

1
2
3
4
5
6
7


const input = document.querySelector('moov-text-input');
const blurCallback = () => {
  // The input lost focus
  input.checkValidity();
};

input.onBlur = blurCallback;

1
2
3
4
5
6
7


const input = document.querySelector('moov-text-input');
const invalidCallback = () => {
  // The input failed validation
  console.error(input.validationMessage);
};

input.onInvalid = invalidCallback;

Methods

You can call the methods of moov-text-input to perform various actions.

Method	Description	Parameters	Returns
`blur`	Removes focus from the input.	None	None
`click`	Imitates a user click on the input.	None	None
`focus`	Focuses the input.	None	None
`select`	Selects the input.	None	None
`setCustomValidity`	Overrides the `validityMessage` on the input.	`validityMessage`: String	None
`checkValidity`	Runs a validity check on the input.	None	None
`reportValidity`	Runs a validity check on the input and reports the result to the user through browser default behavior.	None	None

How to call a method

1
2


const input = document.querySelector('moov-text-input');
input.focus();

1
2
3


const input = document.querySelector('moov-text-input');
input.checkValidity();
// Use onCheckValidity for the result

Properties

How to set a property

Methods

How to call a method

Was this helpful?