iter(g263): 标签输入支持多值粘贴
This commit is contained in:
@@ -12,6 +12,7 @@ export function inputTag(props: InputTagProps): HTMLElement {
|
||||
const limit = props.max ?? 0; // 0 = 不限条数
|
||||
const maxLength = props.maxLength ?? 24; // 单个标签超长直接截断,防止一个标签撑爆整行
|
||||
const allowDuplicate = props.allowDuplicate ?? false;
|
||||
const SEP = /[,,\n\t]+/; // 多值粘贴的分隔符:半角 / 全角逗号、换行、制表符(从表格或列表里整段粘来最常见)
|
||||
root.append(input);
|
||||
|
||||
/*** 作用:写回标签集合(单一出口:信号与 onChange 永远同源,避免两处各写一次) ***/
|
||||
@@ -63,6 +64,12 @@ export function inputTag(props: InputTagProps): HTMLElement {
|
||||
if (list.length) put(list.slice(0, -1)); // 空框退格:删掉最后一个 chip
|
||||
}
|
||||
});
|
||||
input.addEventListener('paste', (event) => {
|
||||
const text = event.clipboardData?.getData('text') ?? '';
|
||||
if (!SEP.test(text)) return; // 单值粘贴交给浏览器默认行为,不打断普通输入
|
||||
event.preventDefault();
|
||||
text.split(SEP).forEach((piece) => commit(piece)); // 多值粘贴:拆成多个 chip,逐个过截断 / 去重 / 上限
|
||||
});
|
||||
input.addEventListener('blur', () => commit(input.value)); // 失焦即入列:手输后忘了回车也不会丢
|
||||
root.addEventListener('click', () => input.focus()); // 点外框任意位置都聚焦输入框
|
||||
|
||||
|
||||
Reference in New Issue
Block a user