> ## 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.

# 单行文本

> 本文介绍了单行文本组件的基础功能和高级用法，包括扫码、计数器、一键清除等功能，并提供了详细的配置说明和示例代码。

单行文本可用于录入数字，比如身份证号、手机号、学号、员工编号、银行卡号、会员号等；也可只输入普通的文字。

[组件基础信息](/zh/yida/form/snftao)

<Note>
  组件属性以及使用和示例请[**点击此处**](/zh/open/yida/components/interface)查看
</Note>

## 基础功能

拥有扫码、计数器、一键清除、高级功能页面跳转等功能。

### 扫码功能

#### 扫码模式

> 我们可以调用钉钉的扫码功能，快速将二维码/条形码的消息录入给单行文本组件。
>
> 常用于设备巡查、资产盘点等需要扫码输入的场景。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639015064595-7dd01015-0517-4547-b14b-1d8d11158a2d.png)
</Frame>

扫码模式

**效果如图：**

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1623743899108-015e5316-7e0e-437a-8cf1-6c4fb85a6092.png)
</Frame>

**注**：该模式仅在钉钉手机端内支持，开启后，如果在不支持的环境下，点击扫码会出现提示需要在钉钉端内打开，不会影响到组件的基础使用。

#### 扫码类型

**扫码类型支持**： `全部` 、 `仅二维码` 、 `仅条形码`

**全部**：一个控件既可以识别 `二维码` 又可以识别 `条形码`

支持从相册选择图片进行识别

#### 允许修改扫码结果

扫码识别到的信息支持修改，如果开启了不允许修改扫码结果的按钮，则无法对扫码后的结果进行修改

如图设置：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639015116451-487c43b5-ed89-4ddc-8de5-a506e47d7622.png)
</Frame>

### 计数器

开启计数器后，可设置该组件的字数上限，超出设置的字数上限后，会进行校验提示。

效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639015200467-ce8ca1bb-7e94-429f-903a-9b36d1f619ba.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639015272883-70b91dc4-8074-4b74-ac34-5013968f5787.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639015304807-1f5d6c3b-f663-4465-b454-06027405e717.png)
</Frame>

### 一键清除

勾选显示清除按钮后，在访问/预览页面如输入内容有误，可直接使用清除按钮一键清除。

效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639015485094-f2491cda-913f-492d-9069-f365e404fc72.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639015538677-ec5f14b0-0667-4c84-a7e1-8d0dfc891eba.png)
</Frame>

## 高级用法

通过扫描二维码/条形码所获取到的信息，可以拼接链接，然后进行页面跳转

例如：扫码查看商品详情，扫码订餐这种场景等可适用

效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1613703234187-ea02edac-74a8-46c7-8393-11357e8e26df.png)
</Frame>

**路径**：单行文本 >> 高级 >> 新建动作配置一个固定地址链接

**举例**：新建动作写 js 时，我们可以配置一个固定的地址链接，当扫码成功后，页面获取到的信息可作为链接参数，跳转到事先设置好的固定地址链接里去查看详情，实现扫码成功后自动跳转页面的功能。

参考设置图片如下：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639016005127-8e2f917f-e85f-4e11-9de1-9d1779cf091e.png)
</Frame>

**注**：代码中的红框位置要改成和右侧唯一标识一致的信息

**唯一标识**：类似每个控件的身份证  每个控件的唯一标识是不一样的

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639016041811-12b78835-d1aa-43ee-b37f-2f23bffb3eca.png)
</Frame>

**可粘贴参考使用的 js 代码信息**：

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function onScanCodeSuccess(text) {
  const fieldId = 'editorField_klbopk6r';
  // 如果不是 http 或者 https 开头的话，不显示下方文本。
  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">点击查看溯源单</a></span></div>`;
  // 赋值
  this.$(fieldId).setValue(html);
  // 注意，onScanCodeSuccess 事件要 return text 回去，不然回填会有问题
  return text;
}
```
