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

# 一行テキスト

> YiDAの一行テキストコンポーネントの基本機能と高度な使い方を解説します。QRコードスキャン、文字数カウンター、ワンクリッククリア、スキャン後の自動リダイレクトなど、業務シーンに応じた設定方法とサンプルコードを紹介します。

一行テキストコンポーネントは、身分証番号、電話番号、学籍番号、社員番号、銀行カード番号、会員番号などの数値入力に対応します。プレーンテキストの入力にも利用できます。

[コンポーネントの基本](/ja/yida/form/snftao)

<Note>
  コンポーネントの属性、使い方、例については、[**こちら**](/ja/open/yida/components/interface)をご覧ください。
</Note>

## 基本機能

QRコードスキャン、文字数カウンター、ワンクリッククリア、および高度なページリダイレクトに対応しています。

### QRコードスキャン

#### スキャンモード

> DingTalkのスキャン機能を呼び出し、QRコードやバーコードのデータを一行テキストコンポーネントに素早く取り込みます。
>
> 機器点検や資産棚卸しなど、スキャンによる入力が必要なシーンでよく利用されます。

スキャンモード

**結果：**

**注意：** 本モードはDingTalkモバイルアプリでのみ対応しています。有効化した状態で非対応環境からスキャンボタンをタップすると、DingTalkで開くよう促すメッセージが表示されますが、コンポーネントの基本利用には影響ありません。

#### スキャンタイプ

**対応するスキャンタイプ：** `すべて`、`QRコードのみ`、`バーコードのみ`。

**すべて：** 1つのコントロールで`QRコード`と`バーコード`の両方を認識できます。

アルバムから画像を選択して認識することもできます。

#### スキャン結果の変更を許可

デフォルトではスキャン情報を変更できます。スキャン結果の変更を禁止するオプションを有効にすると、スキャン結果は編集できなくなります。

以下のように設定してください。

### 文字数カウンター

文字数カウンターを有効にしたうえで、コンポーネントの最大文字数を設定します。上限を超えると、バリデーションのメッセージが表示されます。

結果：

### ワンクリッククリア

クリアボタンを表示するオプションを選択すると、アクセスページまたはプレビューページでボタンをタップして、誤入力を即座にクリアできます。

結果：

## 高度な使い方

QRコードやバーコードのスキャンで取得した情報をリンクに組み込み、ページのリダイレクトをトリガーできます。

たとえば、スキャンして商品詳細を表示する、スキャンして飲食を注文するといったシーンで活用できます。

結果：

**パス：** 一行テキスト >> プレミアム >> アクションを作成し、固定のURLを設定します。

**例：** 新規アクション用のJSを記述する際に、固定のURLを設定します。スキャンが成功すると、取得した情報がURLパラメータとして渡され、あらかじめ設定した固定URLへリダイレクトして詳細を表示します。これにより、スキャン成功後の自動ページリダイレクトが実現します。

参考設定：

**注意：** コード内のハイライト部分を、右側に表示される固定値の識別子に合わせて更新してください。

**固定値の識別子：** 各コントロールのID証のようなものです。コントロールごとに異なる固定値の識別子を持ちます。

**貼り付けてそのまま使える参考JSコード：**

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function onScanCodeSuccess(text) {
  const fieldId = 'editorField_klbopk6r';
  // text が 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 イベントは必ず text を return する必要があります。そうしないと値が正しく設定されません。
  return text;
}
```