<!-- HTML -->
<input type="text" id="username" placeholder="請輸入用戶名">

// JavaScript
const input = document.getElementById('username');

// 監(jiān)聽失去焦點事件（blur）
input.addEventListener('blur', function () {
  // 獲取當(dāng)前值并去除前后空格
  const trimmedValue = this.value.trim();
  // 如果原值有前后空格，則更新輸入框的值
  if (this.value !== trimmedValue) {
    this.value = trimmedValue;
    // 可選：觸發(fā)輸入事件（如需要同步到其他依賴該值的邏輯）
    this.dispatchEvent(new Event('input'));
  }
});

<!-- HTML -->
<form id="userForm">
  <input type="text" name="phone" placeholder="手機號">
  <input type="text" name="address" placeholder="地址">
  <button type="submit">提交</button>
</form>

// JavaScript
const form = document.getElementById('userForm');

form.addEventListener('submit', function (e) {
  e.preventDefault(); // 阻止默認(rèn)提交行為

  // 遍歷所有輸入框，去除前后空格
  const inputs = this.querySelectorAll('input[type="text"]');
  inputs.forEach(input => {
    const trimmedValue = input.value.trim();
    input.value = trimmedValue; // 直接修改輸入框的值
  });

  // 提交處理（此時輸入值已清理）
  console.log('提交數(shù)據(jù)：', Object.fromEntries(new FormData(this)));
});

import { useState } from 'react';

function InputComponent() {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    // 實時去除前后空格
    const trimmedValue = e.target.value.trim();
    setValue(trimmedValue);
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
      placeholder="實時去除前后空格"
    />
  );
}

import { useState } from 'react';

function InputComponent() {
  const [value, setValue] = useState('');

  const handleBlur = () => {
    // 失去焦點時去除前后空格
    const trimmedValue = value.trim();
    setValue(trimmedValue);
  };

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)} // 允許輸入時保留空格
      onBlur={handleBlur} // 失去焦點時修正
      placeholder="失去焦點時去除前后空格"
    />
  );
}

<template>
  <input
    type="text"
    v-model.lazy="trimmedValue"
    placeholder="失去焦點時去除前后空格"
  >
</template>

<script>
export default {
  data() {
    return {
      rawValue: '' // 原始輸入值
    };
  },
  computed: {
    trimmedValue: {
      get() {
        return this.rawValue;
      },
      set(val) {
        // 僅保留非空格字符（或根據(jù)需求調(diào)整）
        this.rawValue = val.trim();
      }
    }
  }
};
</script>

// 注冊全局指令 v-trim
Vue.directive('trim', {
  // 當(dāng)綁定元素的 attribute 前調(diào)用
  created(el, binding, vnode) {
    const input = el.tagName === 'INPUT' ? el : el.querySelector('input');
    if (!input) return;

    // 監(jiān)聽失去焦點事件
    input.addEventListener('blur', () => {
      const trimmedValue = input.value.trim();
      input.value = trimmedValue;
      // 觸發(fā)輸入事件更新 Vue 數(shù)據(jù)
      input.dispatchEvent(new Event('input'));
    });
  }
});

<template>
  <input type="text" v-model="username" v-trim placeholder="使用自定義指令去除空格">
</template>

app.post('/submit', (req, res) => {
  const username = req.body.username?.trim(); // 服務(wù)端再次處理
  const phone = req.body.phone?.trim();
  // 后續(xù)業(yè)務(wù)邏輯...
});

// 安全的 trim 方法（避免報錯）
function safeTrim(str) {
  return typeof str === 'string' ? str.trim() : '';
}

// 使用示例
const inputValue = document.getElementById('input').value;
const cleanedValue = safeTrim(inputValue);

// 去除所有空格（包括中間）
const noSpaceValue = inputValue.replace(/\s+/g, '');

/* 禁止輸入框內(nèi)的文本換行 */
input {
  white-space: nowrap;
}

/* 保留空格但允許換行（罕見需求） */
textarea {
  white-space: pre-wrap;
}