快捷導(dǎo)航

el-select加上搜索查詢時限制開頭空格輸入的解決方案

更新時間：2024年02月22日 09:42:39 作者：PXY_J

這篇文章主要介紹了el-select加上搜索查詢時,限制開頭空格輸入的解決方案,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

el-select加上搜索查詢時，限制開頭空格輸入的解決方案

**1、注釋：**結(jié)構(gòu)中的ref和@input.native很重要

<el-form-item label="商品類型：" prop="productType">
   <el-select
     ref="eleSelect" //這里很重要1
     v-model.trim="formData.productType"
     placeholder="請選擇"
     filterable
     clearable
     @input.native="trimSelect"  //這里很重要2
   >
     <el-option
       v-for="item in dictList.SPLX"
       :key="item.dictId"
       :label="item.dictLabel"
       :value="item.dictValue"
     ></el-option>
 </el-select>
</el-form-item>

2、js中限制開頭為空格時重新賦值為空

  // 開頭為空格時重新賦值為空
  const eleSelect = ref()
  const trimSelect = ()=>{
    let regex = /^\s*$/;
    if(regex.test(eleSelect.value.selectedLabel)){
       eleSelect.value.selectedLabel = ''
    }
  }

補(bǔ)充：

el-select輸入框禁止用戶輸入空格

使用自定義指令，監(jiān)聽事件，當(dāng)鼠標(biāo)按下時阻止默認(rèn)行為。

<el-select
  v-model.trim="noUpdatedForm.terminalCode"
  v-my-directive
  placeholder="請選擇"
  filterable
  clearable
>
  <el-option
    v-for="item in noUpdatedTerminalCode"
    :key="item.terminalCode"
    :value="item.terminalCode"
    :label="item.terminalCode"
  ></el-option>
</el-select>
directives: {
  'my-directive': {
    bind(el, binding) {
      el.addEventListener('keydown', function(e) {
        if (e.key === ' ') {
          e.preventDefault()
        }
      })
    }
  }
},

到此這篇關(guān)于el-select加上搜索查詢時，限制開頭空格輸入的文章就介紹到這了,更多相關(guān)el-select限制開頭空格輸入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)QQ郵箱郵件拖拽刪除功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)QQ郵箱郵件拖拽刪除功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
JS對象和字符串之間互換操作實(shí)例分析
這篇文章主要介紹了JS對象和字符串之間互換操作,結(jié)合實(shí)例形式分析了javascript對象與字符串相互轉(zhuǎn)換的原理與相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02
微信小程序服務(wù)器日期格式化問題
一般服務(wù)器獲取到日期都是中國標(biāo)準(zhǔn)時間，需要對其進(jìn)行格式化,這篇文章主要介紹了微信小程序服務(wù)器日期格式化問題，需要的朋友可以參考下
2020-01-01
微信小程序?qū)崿F(xiàn)軌跡回放的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)軌跡回放的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
常用的Javascript設(shè)計模式小結(jié)
javascript設(shè)計模式有很多種，本文給大家介紹常用的javascript設(shè)計模式，對javascript設(shè)計模式相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
js實(shí)現(xiàn)幻燈片輪播圖
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)幻燈片輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
js,jQuery 排序的實(shí)現(xiàn)代碼,網(wǎng)頁標(biāo)簽排序的實(shí)現(xiàn),標(biāo)簽排序
js,jQuery 排序的實(shí)現(xiàn),網(wǎng)頁標(biāo)簽排序的實(shí)現(xiàn),標(biāo)簽排序，需要的朋友可以參考下。
2011-04-04
JS原型鏈詳解及示例代碼
本文主要介紹JS原型鏈的知識，這里整理了相關(guān)資料及簡單實(shí)現(xiàn)示例代碼，有興趣的小伙伴可以參考下
2016-09-09
HTML使用js給input標(biāo)簽增加disabled屬性的方法
最近項目上提出一個經(jīng)常遇到的需求,點(diǎn)擊新增時input可輸入,點(diǎn)擊編輯時input置灰,下面這篇文章主要給大家介紹了關(guān)于HTML使用js給input標(biāo)簽增加disabled屬性的相關(guān)資料,需要的朋友可以參考下
2024-06-06
微信小程序?qū)崿F(xiàn)接收驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)接收驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-05-05