FreeGridv1.15.1English

정해진 서식 입력(전화번호·사업자번호)

정해진 서식으로 입력: 한국 전화번호(010, 02, 1588), 사업자번호, 카드번호, 우편번호 또는 직접 만든 패턴. 입력하는 대로 하이픈이 들어갑니다.

실행 예제서식 입력

전화번호, 사업자번호, 사용자 패턴, 숫자만 저장.

이 데모의 코드
import { createGrid, type ColumnDef, type Row } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const data = makeRows(150).map((r, i) => ({ ...r, tel: `010-${1000 + (i * 37) % 9000}-${1000 + (i * 91) % 9000}`, office: i % 2 ? '02-555-1234' : '031-123-4567', bizNo: `${1000000000 + i * 12345}`, usPhone: '' }));
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 140 },
      { field: 'tel', header: h('Mobile', '휴대폰'), width: 140, editable: true, editor: { type: 'mask', mask: 'phone' } },
      { field: 'office', header: h('Office', '사무실'), width: 140, editable: true, editor: { type: 'mask', mask: 'phone' } },
      { field: 'bizNo', header: h('Business no. (digits stored)', '사업자번호(숫자만 저장)'), width: 200, editable: true, editor: { type: 'mask', mask: 'bizNo', raw: true } },
      { field: 'usPhone', header: h('US phone (pattern)', '미국 번호(패턴)'), width: 160, editable: true, editor: { type: 'mask', mask: '(000) 000-0000' } },
    ],
    data, locale: ctx.lang, filterRow: true,
  });
  grid.on('cellValueChanged', e => ctx.log(`${e.colId} stored ${JSON.stringify(e.newValue)}`));
  text(ctx, h('Type digits into a phone cell: the dashes appear by themselves. In the filter row, 01012 finds 010-12…',
    '전화번호 칸에 숫자만 입력해 보세요. 하이픈이 저절로 들어갑니다. 필터 행에서 01012로 010-12…를 찾습니다.'));
  return grid;
}

editor: { type: 'mask', mask }는 입력값을 정해진 모양으로 유지합니다. 하이픈·괄호·공백 같은 고정 문자는 입력하는 대로 저절로 들어가고, 커서는 방금 입력한 글자 뒤에 머물며, 덜 입력한 값은 거부됩니다.

기본 서식

mask예설명
'phone'010-1234-5678 · 02-123-4567 · 02-1234-5678 · 031-123-4567 · 1588-1234한국 번호: 휴대폰, 서울 02, 지역번호, 15xx~19xx. 숫자에 따라 모양이 바뀜
'bizNo'123-45-67890사업자등록번호(10자리)
'card'1234-5678-9012-3456카드번호(16자리)
'zip'06236우편번호(5자리)

직접 만드는 패턴

0은 숫자, a는 문자, *는 문자나 숫자이고, 나머지 글자는 자동으로 들어갑니다.

const columns = [
  { field: 'tel', editable: true, editor: { type: 'mask', mask: 'phone' } },
  { field: 'bizNo', editable: true, editor: { type: 'mask', mask: 'bizNo', raw: true } },   // stores 1234567890
  { field: 'usPhone', editable: true, editor: { type: 'mask', mask: '(000) 000-0000' } },
  { field: 'plate', editable: true, editor: { type: 'mask', mask: '00a 0000' } },           // 12가 3456
  { field: 'code', editable: true, editor: { type: 'mask', mask: 'aa-***' } },              // AB-12C
];

옵션

이름타입설명
mask'phone' | 'bizNo' | 'card' | 'zip' | string기본 서식 이름 또는 패턴(0 숫자, a 문자, * 둘 다).
rawboolean서식 문자 없이 입력한 글자만 저장(1234567890). 셀에는 여전히 서식이 적용된 값이 보입니다.

입력·붙여넣기·검색·엑셀

  • 자리와 맞지 않는 글자(숫자 자리에 문자)는 입력할 때 무시됩니다.
  • 010 1234 5678, 01012345678, 010-1234-5678 어느 것을 붙여넣어도 010-1234-5678로 저장되고, 덜 된 값은 건너뜁니다.
  • 필터와 빠른 검색은 하이픈이 있든 없든 찾습니다: 01012로 010-1234-5678을 찾습니다.
  • 엑셀·CSV에는 서식이 적용된 글자가 나갑니다(raw: true면 숫자만).
  • 빈 칸은 허용됩니다. 값을 꼭 받으려면 required: true를 쓰세요.

이 페이지에 대한 질문

그리드에서 전화번호를 입력할 때 하이픈을 자동으로 넣으려면?

editor: { type: 'mask', mask: 'phone' }을 쓰세요. 01012345678은 010-1234-5678, 0212345678은 02-1234-5678이 되고, 덜 입력한 번호는 거부됩니다.