禁止輸入選擇問題

2022-08-23 20:06:10 字數 756 閱讀 7821

1.專案之前遇到過此問題 用css處理即可,這裡我寫了個demo總結下

需求:要輸入框/下拉框禁止輸入點選效果,並且顯示禁止符號

(通常情況下 輸入框/下拉框外面還有一層父元素)

一般我們肯定會給父元素和子元素用屬性 cursor: not-allowed;

問題:但是驚奇的發現輸入框滑鼠劃過有禁止符號,但是還可以輸入內容??

解決:要想讓輸入框既有禁止符號顯示,又禁止輸入,需要在子元素中新增屬性 pointer-events: none;

注:如果在父元素中新增屬性 pointer-events: none; 會導致滑鼠放上去雖然不能點選了,但顯示的是箭頭 而不是禁用符號,

因為設定的 pointer-events:none;  把所有點選事件全部禁掉了,cursor 也沒有了

1

div

12 .el-input

181920"

input

" placeholder="

請輸入內容

">

2122

23data: ,

由於截不出效果圖,貼張demo樣式圖,大家自行腦補下吧

可輸入 選擇的下拉框 非同步程式設計

在實際開發開發中我們會用到各種瀏覽器 html js等提供的原生的元件 介面,但是這樣並不一定滿足我們的要求,所以我們需要自己寫一些我們需要的元件。平常我們會經常用 select 標籤做下拉選項,不過這個只能選擇不能手動輸入,當然網上也有很強大的select2外掛程式,如果只要輸入和選擇兩個功能的話...

input禁止輸入

輸入框禁止輸入 昨天遇到乙個問題,需求是乙個 輸入框 只准點選賦值,不可以手動輸入。開始隨手寫了乙個 nkeyd wn return false value 結果測試說 firefox 下切換成中文就可以輸入 崩潰 後來換成了 nf cus this.blur value 好了這下總得不到焦點了 最...

冒泡,插入,選擇排序

經典的排序演算法,此文章介紹三個 氣泡排序 它重複地走訪過要排序的數列,一次比較兩個元素,如果他們的順序錯誤就把他們交換過來。走訪數列的工作是重複地進行直到沒有再需要交換,也就是說該數列已經排序完成。public void bubblesort int a while iswrap for int ...