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.
### Card Capture
#### Cardholder name
```html
```
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
```javascript
const input = document.querySelector('moov-text-input');
input.name = 'demoInput';
```
```javascript
const input = document.querySelector('moov-text-input');
input.inputStyle = {
fontSize: "14px",
color: "blue",
};
```
```javascript
const input = document.querySelector('moov-text-input');
const blurCallback = () => {
// The input lost focus
input.checkValidity();
};
input.onBlur = blurCallback;
```
```javascript
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
```javascript
const input = document.querySelector('moov-text-input');
input.focus();
```
```javascript
const input = document.querySelector('moov-text-input');
input.checkValidity();
// Use onCheckValidity for the result
```