vue禁止使用者在輸入框或文字域中複製貼上剪下

2021-10-17 04:26:31 字數 914 閱讀 2174

需求: 阻止element元件中的複製貼上功能

實現思路: 元件是由外層

和內層的組成的, 根據瀏覽器的事件傳遞機制(先捕獲,後冒泡): 貼上的時候會先執行繫結在外層div上的paste事件捕獲方法, 然後再到內層的input, 因此可以在元件上捕獲監聽paste事件, 並阻止向下傳播即可

**實現:

v-model=

"answer"

@paste.native.capture.prevent=

"handlefalse"

@copy.native.capture.prevent=

"handlefalse"

@cut.native.capture.prevent=

"handlefalse"

@keyup.native=

"compute"

:autosize=

"" placeholder=

"請在此輸入上面一段文字,測試打字"

type=

"textarea"

ref=

"input"

>

<

/el-input>

//方法

handlefalse()

compute()

事件修飾符說明:

native: 表明這個是dom的原生事件,如果不加native, vue會認為paste是乙個自定義事件,必須要在元件內手動觸發, 那麼在貼上的時候自然就不會觸發了

capture: 表明這個方法在捕獲階段執行,預設為冒泡執行,參考addeventlistener方法中的usecapture引數

prevent: 相當於event.preventdefault阻止預設行為, 同時也會阻止事件的向下傳遞和向上冒泡

如何禁止使用者在文字輸入框中輸入數字

要想禁止使用者在文字框中輸入數字,首先要判斷使用者是否輸入的是數字,如果是數字的話,怎麼禁止呢?這裡,我巧妙地利用了文字框的唯讀屬性 如果是數字,將該屬性設定為真,使用者的輸入就無效了。在釋放按鍵時,再將該屬性設定為假,接受使用者的下一次輸入。相關 如下 private void txttest k...

輸入框禁止輸入特殊字串,限制輸入文字長度

在開發中經常會遇到一些輸入框禁止使用者輸入特殊字元的情況。最近總結了一下。方法一 如果只是限制少量特殊字元的話可以用以下方法進行判斷是否包含 textfield.text rangeofstring 特殊字元 location nsnotfound如果字串中包含特殊字元可以,將特殊字元移除,將擷取後...

文字框倒敘輸入讓輸入框的焦點始終在最開始的位置

所謂的文字框倒敘輸入是指輸入框的焦點始終在最開始的位置,如圖所示,當我輸入123456789時,在輸入框上顯示的是987654321。為什麼要做這個demo?是因為在專案中遇到了,專案需求是兩個輸入框,乙個正序輸入,另乙個倒敘輸入。下面我把實現的思路和 寫出來。文字倒敘輸入 只要我們保證輸入框的焦點...