輸入多行文字 - daniel-qa/Vue GitHub Wiki

輸入多行文字

將貼上內容，格式化為一行一行的內容，但編輯時，不進行干涉; 離離焦點時，再進行處理

<el-input v-model="teacherIdsInputRaw"
          @blur="formatInput"
          @paste="handlePaste"
          type="textarea"
          :rows="20"
          placeholder="請輸入教師 ID"
          clearable />

    const handlePaste = () => {
        // 等待 paste 完成後處理
        setTimeout(() => {
            formatInput();
        }, 0);
    };
事件 觸發時機 用途範例 說明
@blur="formatInput" 欄位失去焦點時 格式化輸入、去空白、多餘逗號 使用者輸入完、點離開時觸發
@paste="handlePaste" 使用者貼上時 攔截貼上內容、清理換行、轉逗號分隔 阻止原始貼上，改用處理後內容 
<div style="width: 700px;">
	<el-input v-model="teacherIdsInput"
			  type="textarea"
			  :rows="8"
			  placeholder="請輸入教師 ID（用逗號分隔）"
			  clearable />
	<div style="margin-top: 8px;">
		總共 {{ teacherIdList.length }} 位教師
	</div>
</div>

// 接收名單(輸入 TMID)
const teacherIdsInput = ref('1629875867,1929825867, 2929182867')

const teacherIdList = computed(() => {
    return teacherIdsInput.value
        .split(',')
        .map(id => id.trim())
        .filter(id => id !== '')
})
⚠️ **GitHub.com Fallback** ⚠️