> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Single-Line Text

> This article introduces the basic features and advanced usage of the Single-line text component, including QR code scanning, character counter, one-click clear, and other functions, with detailed configuration instructions and sample code.

The Single-line text component can capture numeric input such as ID card numbers, phone numbers, student IDs, employee IDs, bank card numbers, and membership numbers. It can also accept plain text.

[Component basics](/yida/form/snftao)

<Note>
  For component attributes, usage, and examples, [**click here**](/open/yida/components/interface).
</Note>

## Basic Features

Supports QR code scanning, character counter, one-click clear, and advanced page redirection.

### QR Code Scanning

#### Scan Mode

> Call DingTalk's scanning feature to quickly capture QR code or barcode data into the Single-line text component.
>
> Commonly used for scenarios that require scan-based input, such as device inspection and asset inventory.

Scan mode

**Result:**

**Note:** This mode is supported only in the DingTalk mobile app. When enabled, tapping the scan button in an unsupported environment displays a prompt asking the user to open it in DingTalk. This does not affect basic component usage.

#### Scan Type

**Supported scan types:** `All`, `QR Code only`, `Barcode only`.

**All:** A single control can recognize both `QR Code` and `Barcode`.

Supports selecting an image from the Album for recognition.

#### Allow Modifying Scan Results

Scanned information can be modified by default. If the option to disallow modifying scan results is enabled, the scan output cannot be edited.

Configure it as shown below:

### Character Counter

After enabling the character counter, set the maximum character length for the component. Exceeding the limit triggers a validation prompt.

Result:

### One-Click Clear

After selecting the option to display the clear button, users can tap it on the access or preview page to instantly clear any incorrect input.

Result:

## Advanced Usage

Information obtained by scanning a QR code or barcode can be concatenated into a link to trigger a page redirect.

For example, this applies to scenarios such as scanning to view product details or scanning to place a food order.

Result:

**Path:** Single-line text >> Premium >> Create an action and configure a fixed URL.

**Example:** When writing JS for the new action, configure a fixed URL. When the scan succeeds, the captured information is passed as a URL parameter to redirect to the preset fixed URL for viewing details, enabling automatic page redirection after a successful scan.

Reference configuration:

**Note:** Update the highlighted section in the code to match the unique identifier shown on the right.

**Unique identifier:** Similar to an ID card for each control. Each control has a distinct unique identifier.

**Reference JS code you can paste and use:**

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function onScanCodeSuccess(text) {
  const fieldId = 'editorField_klbopk6r';
  // If the text does not start with http or https, do not display the text below.
  if (!/^http(s)/.test(text)) {
    this.$(fieldId).setValue(null);
    return text;
  }
  const html = `<div><span style="color: #0089ff;"><a style="color: #0089ff;" href="${text}" target="_blank">Click to view the traceability record</a></span></div>`;
  // Assign the value
  this.$(fieldId).setValue(html);
  // Note: the onScanCodeSuccess event must return text; otherwise, the value will not be populated correctly.
  return text;
}
```