iter(g40): 修表单双提交并支持 Enter 提交
This commit is contained in:
@@ -71,8 +71,8 @@ export function form(props: FormProps, items: FormItemHandle[]): HTMLElement {
|
||||
}
|
||||
props.onSubmit?.();
|
||||
};
|
||||
const submitBtn = button({ label: props.submitText ?? '提交', onClick: submit });
|
||||
const resetBtn = props.resetText ? button({ label: props.resetText, variant: 'ghost', onClick: props.onReset }) : null;
|
||||
const submitBtn = button({ label: props.submitText ?? '提交', type: 'submit' }); // 走原生 submit,避免 click + submit 双触发
|
||||
const resetBtn = props.resetText ? button({ label: props.resetText, variant: 'ghost', type: 'button', onClick: props.onReset }) : null; // 重置不得提交表单
|
||||
const actions = h('div', { class: 'ua-form-actions' }, submitBtn, resetBtn);
|
||||
const el = h(
|
||||
'form',
|
||||
@@ -84,5 +84,11 @@ export function form(props: FormProps, items: FormItemHandle[]): HTMLElement {
|
||||
e.preventDefault(); // 拦截原生提交,走校验流程
|
||||
submit();
|
||||
});
|
||||
el.addEventListener('keydown', (e) => {
|
||||
if (e.key !== 'Enter' || e.target instanceof HTMLTextAreaElement) return; // 多行输入框允许换行
|
||||
if (!(e.target instanceof HTMLInputElement)) return; // 只接管单行输入框
|
||||
e.preventDefault(); // 拦下浏览器隐式提交,统一走校验
|
||||
submit();
|
||||
});
|
||||
return el;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user