使用 Javascript 禁用粘貼操作（不包括 Jquery）

Question

我有一個用於登錄手機號碼的文本框，我必須禁用粘貼操作

我在 ReactJs 工作，我使用的代碼是下面提到的。

<input
 type="text"
 name="userName"
 placeholder="Mobile number"
 onChange={e => this.onChangeNumber(e)}
 value={this.state.userName}                      
 maxLength="10"
 autoFocus
 autoComplete="off"
/>

我想在不使用 jquery 和任何其他包的情況下使用 JS 代碼禁用粘貼操作。 任何人都可以幫助我完成這個。

提前致謝。

Answer 1

如果您使用的是 reactjs，您可以直接在輸入標簽中使用 onPaste 事件，如下所示。 所以它會限制粘貼動作。

     <input
     type="text"
     name="userName"
     placeholder="Mobile number"
     onChange={e => this.onChangeNumber(e)}
     onPaste={e => {e.preventDefault()}}
     value={this.state.userName}                      
     maxLength="10"
     autoFocus
     autoComplete="off"
    />

如果要使用 js，可以在 function 中使用以下代碼。 這樣粘貼動作就會被阻止。

    onChangeNumber =()=>{
       document.getElementByName('userName').onpaste=function(e){
         e.preventDefault();
       }
     }

Answer 2

做到這一點的眾多方法之一是

  useEffect(()=>{
    document.getElementById('ipt').onpaste=function(e){
      e.preventDefault();
    }
  },[])


  return (
    <div className="App">

      <input
          type="text"
          name="userName"
          placeholder="Mobile number"
          id='ipt' 
          autoFocus
          autoComplete="off"
        />
    </div>
  );
}

為什么要用useEffect？ 因此，當我們document.getElementById時，DOM 元素輸入已經初始化並且不會返回 NULL。

注意：通常不建議將粘貼限制在輸入字段中。 這很煩人並影響用戶體驗。

PS：我不確定為什么 refs 不能與 onpaste 一起使用。 也許這將是一種更好的REACT方式。

Answer 3

<input
 type="text"
 name="userName"
 placeholder="Mobile number"
 onChange={e => this.onChangeNumber(e)}
 onPaste={e => {e.preventDefault()}}
 value={this.state.userName}                      
 maxLength="10"
 autoFocus
 autoComplete="off"
/>

簡單地阻止 onPaste 的默認操作是必要的。

Answer 4

<input type="text" class="word"> //html code
let box = document.querySelector(".word");// javacript method
//Disable Paste Event
box.onpaste = function () {
    return false;
}