整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          好煩,怎么輸入拼音的過(guò)程也會(huì)觸發(fā)input事件!??!



          在前面

          input輸入框大家應(yīng)該都很熟悉了吧,不知道大家有沒(méi)有遇到過(guò)這樣的一種情況:如上圖,在中文輸入過(guò)程中,輸入的拼音也會(huì)觸發(fā)input框的input事件,有些時(shí)候我們并不希望在中文輸入的過(guò)程中拼音觸發(fā)input事件。

          在日常開(kāi)發(fā)中,輸入框是一個(gè)常見(jiàn)的組件,但是在拼音輸入過(guò)程中,每次輸入都會(huì)觸發(fā)input事件,這可能會(huì)導(dǎo)致不必要的操作。本文將介紹一種解決該問(wèn)題的Vue指令,使得在拼音輸入過(guò)程中不會(huì)觸發(fā)input事件,從而優(yōu)化輸入框體驗(yàn)。

          效果展示

          實(shí)現(xiàn)原理

          1、compositionstart和compositionend事件

          我們需要了解compositionstart和compositionend兩個(gè)事件。當(dāng)用戶開(kāi)始輸入拼音時(shí),會(huì)觸發(fā)compositionstart事件,此時(shí)輸入框的值并沒(méi)有真正改變。隨著輸入的進(jìn)行,最終會(huì)觸發(fā)compositionend事件,此時(shí)輸入框的值才會(huì)真正改變。我們可以通過(guò)監(jiān)聽(tīng)這兩個(gè)事件,來(lái)控制何時(shí)觸發(fā)input事件。

          具體實(shí)現(xiàn)方式是,在監(jiān)聽(tīng)到compositionstart事件時(shí),將輸入框的值存儲(chǔ)下來(lái),然后在監(jiān)聽(tīng)到compositionend事件時(shí),再將輸入框的值與之前存儲(chǔ)的值進(jìn)行比較,如果不同,則觸發(fā)自定義的input事件,并將新值作為參數(shù)傳遞給監(jiān)聽(tīng)器。

          2、代碼實(shí)現(xiàn)

          (1)輸入框

          html復(fù)制代碼<div class="input-text-title">正常情況</div>
          <div class="input-text-content">{{ inputText }}</div>
          <input
              placeholder="請(qǐng)輸入"
              class="input-text"
              @input="doInput"
              id="inputContent"
          />

          簡(jiǎn)單定義一個(gè)輸入框,監(jiān)聽(tīng)其input事件,inputText保存實(shí)時(shí)輸入內(nèi)容并展示到頁(yè)面上。

          (2)監(jiān)聽(tīng)compositionstart和compositionend事件

          javascript復(fù)制代碼const inputContent = document.getElementById("inputContent");
          inputContent.addEventListener("compositionstart", () => {
              this.isComposing = true;
              this.inputComplate(inputContent.value);
          });
          inputContent.addEventListener("compositionend", () => {
              this.isComposing = false;
              if (inputContent.value !== this.inputText) {
                  this.inputComplate(inputContent.value);
              }
          });

          首先,我們通過(guò)getElementById方法獲取到id為"inputContent"的輸入框元素,并將其賦值給inputContent常量。

          然后,我們給inputContent元素添加compositionstart事件的監(jiān)聽(tīng)器。在事件觸發(fā)時(shí),會(huì)執(zhí)行回調(diào)函數(shù)。在回調(diào)函數(shù)中,我們將isComposing變量設(shè)置為true,表示正在進(jìn)行拼音輸入,然后調(diào)用inputComplate方法處理輸入框的值,并將輸入框的值作為參數(shù)傳遞給inputComplate方法。

          接下來(lái),我們給inputContent元素添加compositionend事件的監(jiān)聽(tīng)器。在事件觸發(fā)時(shí),同樣會(huì)執(zhí)行回調(diào)函數(shù)。在回調(diào)函數(shù)中,我們將isComposing變量設(shè)置為false,表示拼音輸入結(jié)束,然后同樣調(diào)用inputComplate方法處理輸入框的值,并將輸入框的值作為參數(shù)傳遞給inputComplate方法。

          通過(guò)監(jiān)聽(tīng)這兩個(gè)事件,并在事件觸發(fā)時(shí)調(diào)用相應(yīng)的處理方法,我們可以實(shí)現(xiàn)在拼音輸入過(guò)程中控制input事件的觸發(fā)時(shí)機(jī),從而達(dá)到不觸發(fā)input事件的效果。

          (3)input事件判斷是否正在輸入拼音

          javascript復(fù)制代碼inputComplate(value) {
              this.inputText = value;
          },
          doInput(event) {
              if (this.isComposing) return;
              const value = event.target.value;
              this.inputComplate(value);
          },

          輸入框input事件綁定的是doInput方法,這個(gè)方法在這里只是用于過(guò)渡一下,在這里我們需要判斷當(dāng)前是否正在輸入拼音,如果是在輸入拼音的話我們就直接返回,不進(jìn)行后續(xù)操作,如果不是的話則調(diào)用inputComplate進(jìn)行后續(xù)處理,真正的處理邏輯應(yīng)該是在inputComplate方法中。

          這樣我們就簡(jiǎn)單的完成了一個(gè)忽略拼音輸入過(guò)程中的input事件的功能

          本文到此結(jié)束

          且慢,雖然上面這樣操作之后可以得到一個(gè)可以忽略拼音輸入過(guò)程中的input事件的輸入框;但是,如果我們有很多個(gè)輸入框需要加上這個(gè)功能呢?這樣的話我們每寫(xiě)一個(gè)input框,想要加上這個(gè)功能的話不還得加一堆亂七八糟的代碼來(lái)處理,這明顯很不合理。

          (4)封裝成一個(gè)vue指令

          javascript復(fù)制代碼export default {
              bind(el, binding) {
                  let isComposing = false;
                  let value = "";
                  
                  el.addEventListener("compositionstart", () => {
                      isComposing = true;
                      value = el.value;
                  });
          
                  el.addEventListener("compositionend", () => {
                      isComposing = false;
                      if (value !== el.value) {
                          binding.value(el.value);
                      }
                  });
          
                  // 添加自定義的input事件監(jiān)聽(tīng)器
                  el.addEventListener("input", (event) => {
                      if (isComposing) {
                          return;
                      }
                      const value = event.target.value;
                      // 處理輸入框的值
                      binding.value(value);
                  });
              },
          };
          html復(fù)制代碼<input
              placeholder="輸入試試"
              class="input-text"
              v-JIgnorePinyin="doInput1"
          />

          在bind鉤子函數(shù)中,我們首先定義了兩個(gè)變量isComposing和value,分別用于記錄是否正在進(jìn)行拼音輸入和輸入框的值。

          然后,我們給輸入框元素el添加compositionstart事件的監(jiān)聽(tīng)器。在事件觸發(fā)時(shí),將isComposing設(shè)置為true,表示正在進(jìn)行拼音輸入,并將輸入框的值賦給value。

          接下來(lái),我們給輸入框元素el添加compositionend事件的監(jiān)聽(tīng)器。在事件觸發(fā)時(shí),將isComposing設(shè)置為false,表示拼音輸入結(jié)束。然后,我們比較value和輸入框的當(dāng)前值el.value是否相等,如果不相等,則說(shuō)明輸入框的值已經(jīng)發(fā)生了變化,此時(shí)我們調(diào)用binding.value方法,將當(dāng)前輸入框的值el.value作為參數(shù)傳遞給綁定該指令的處理函數(shù)。

          最后,我們給輸入框元素el添加input事件的監(jiān)聽(tīng)器。在事件觸發(fā)時(shí),首先判斷isComposing的值,如果為true,則直接返回,不做任何處理。如果isComposing的值為false,說(shuō)明拼音輸入已經(jīng)完成,此時(shí)我們獲取輸入框的值event.target.value,并將其作為參數(shù)調(diào)用binding.value方法,從而處理輸入框的值。

          通過(guò)定義這個(gè)自定義指令,我們可以在Vue組件中使用它來(lái)監(jiān)聽(tīng)拼音輸入過(guò)程中的事件,并執(zhí)行相應(yīng)的處理邏輯,從而實(shí)現(xiàn)更加靈活的輸入框交互。

          這樣的話后面需要加功能只需要一個(gè)指令即可搞定。

          組件庫(kù)

          組件文檔

          目前該組件也已經(jīng)收錄到我的組件庫(kù),組件文檔地址如下: jyeontu.xyz/jvuewheel/#…

          組件內(nèi)容

          組件庫(kù)中還有許多好玩有趣的組件,如:

          • 懸浮按鈕
          • 評(píng)論組件
          • 詞云
          • 瀑布流照片容器
          • 視頻動(dòng)態(tài)封面
          • 3D輪播圖
          • web桌寵
          • 貢獻(xiàn)度面板
          • 拖拽上傳
          • 自動(dòng)補(bǔ)全輸入框
          • 圖片滑塊驗(yàn)證
          等等……

          組件庫(kù)源碼

          組件庫(kù)已開(kāi)源到gitee,有興趣的也可以到這里看看:gitee.com/zheng_yongt…

          覺(jué)得有幫助的可以點(diǎn)個(gè)star~

          有什么問(wèn)題或錯(cuò)誤可以指出,歡迎pr~

          有什么想要實(shí)現(xiàn)的組件或想法可以聯(lián)系我~

          作者:JYeontu

          鏈接:https://juejin.cn/post/7330439494666223642


          nput框作為一個(gè)簡(jiǎn)單的輸入框,你對(duì)它的屬性知道有多少?
          常見(jiàn)的屬性(帶new為h5新增屬性):

          1、accept:accept 屬性規(guī)定了可通過(guò)文件上傳提交的服務(wù)器接受的文件類(lèi)型。僅用于input的type類(lèi)型為"file"的時(shí)候。

          屬性值:

          audio/*,音頻

          video/* ,視頻

          image/* ,圖片

          MIME_type,一個(gè)有效的 MIME 類(lèi)型,不帶參數(shù)

            <input type="file" name="pic" accept="image/*" />

          // 如需規(guī)定多個(gè)值,請(qǐng)使用逗號(hào)分隔

          <input  type="file" accept="audio/*,video/*,image/*" />

          2、value:指定元素的value值。

          屬性值:text

          value 屬性對(duì)于不同 input 類(lèi)型,用法也不同:

          • 對(duì)于 "button"、"reset"、"submit" 類(lèi)型 - 定義按鈕上的文本
          • 對(duì)于 "text"、"password"、"hidden" 類(lèi)型 - 定義輸入字段的初始(默認(rèn))值
          • 對(duì)于 "checkbox"、"radio"、"image" 類(lèi)型 - 定義與 input 元素相關(guān)的值,當(dāng)提交表單時(shí)該值會(huì)發(fā)送到表單的 action URL。

          注意:value 屬性對(duì)于 <input type="checkbox"> 和 <input type="radio"> 是必需的。

          注意:value 屬性不適用于 <input type="file">。

          <input value="文本" />

          3、name:表示的該文本輸入框名稱。用于表單提交后引用表單數(shù)據(jù)。只有設(shè)置了 name 屬性的表單元素才能在提交表單時(shí)傳遞它們的值。

          屬性值:text

          <input type="text" name="email" />

          4、size:輸入框的長(zhǎng)度大小。

          屬性值:number

          <input type="text" name="email" size="35" />


          注意:size 屬性適用于下面的 input 類(lèi)型:text、search、tel、url、email 和 password。

          5、maxlength:輸入框中允許輸入字符的最大數(shù)。

          屬性值:number

          <input type="text" name="usrname" maxlength="10" />

          6、readonly:表示該框中只能顯示,不能添加修改。

          <input type="text" name="country" value="中國(guó)" readonly />

          7、required(new):屬性規(guī)定必須在提交表單之前填寫(xiě)輸入字段。

           <input type="text" name="username" required />

          8、alt:定義圖像輸入的替代文本。 (只針對(duì)type="image")

          屬性值:text

          <input type="image" src="submit.gif" alt="Submit" width="48" height="48" />

          9、autocomplete(new):autocomplete 屬性規(guī)定輸入字段是否應(yīng)該啟用自動(dòng)完成功能。

          屬性值:on/off,默認(rèn)啟動(dòng)自動(dòng)完成功能。

          <input autocomplete="off" />

          注意:autocomplete 屬性適用于下面的 <input> 類(lèi)型:text、search、url、tel、email、password、datepickers、range 和 color。

          10、autofocus(new):屬性規(guī)定當(dāng)頁(yè)面加載時(shí) <input> 元素應(yīng)該自動(dòng)獲得焦點(diǎn)。

          屬性值:autofocus

          <input type="text"  autofocus />

          11、checked:checked 屬性規(guī)定在頁(yè)面加載時(shí)應(yīng)該被預(yù)先選定的 <input> 元素。 (只針對(duì) type="checkbox" 或者 type="radio")

          屬性值:checked

          <input type="checkbox" name="vehicle" value="Car" checked />小汽車(chē)

          12、disabled:disabled 屬性規(guī)定應(yīng)該禁用的 <input> 元素。

          屬性值:disabled

          <input type="text" name="lname" disabled />

          13、form(new): form 屬性規(guī)定 <input> 元素所屬的一個(gè)或多個(gè)表單。

          位于 form 表單外的輸入字段(但仍然屬于 form 表單的一部分):

          <form action="demo-form.php" id="form1">
              First name: <input type="text" name="fname"><br>
             <input type="submit" value="提交">
          </form>

          14、formaction(new):屬性規(guī)定當(dāng)表單提交時(shí)處理輸入控件的文件的 URL。(只針對(duì) type="submit" 和 type="image")

          屬性值:URL

          <input type="submit" formaction="demo-admin.php" value="提交" />

          注意:

          formaction 屬性規(guī)定當(dāng)表單提交時(shí)處理輸入控件的文件的 URL。

          formaction 屬性覆蓋 <form> 元素的 action 屬性。

          15、formenctype(new):屬性規(guī)定當(dāng)表單數(shù)據(jù)提交到服務(wù)器時(shí)如何編碼(只適合 type="submit" 和 type="image")。

          屬性值:application/x-www-form-urlencoded ;multipart/form-data text/plain

          <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交" />

          注意:

          formenctype 屬性規(guī)定當(dāng)表單數(shù)據(jù)提交到服務(wù)器時(shí)如何編碼(僅適用于 method="post" 的表單)。

          formenctype 屬性覆蓋 <form> 元素的 enctype 屬性。

          16、formmethod (new):定義發(fā)送表單數(shù)據(jù)到 action URL 的 HTTP 方法。 (只適合 type="submit" 和 type="image")

          屬性值:get / post

          <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交" />

          17、formnovalidate(new):formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。

          屬性值:formnovalidate

          <input type="submit" formnovalidate="formnovalidate" value="不驗(yàn)證提交">

          18、formtarget (new):規(guī)定表示提交表單后在哪里顯示接收到響應(yīng)的名稱或關(guān)鍵詞。(只適合 type="submit" 和 type="image")

          屬性值:_blank; _self; _parent; _top; framename

          <input type="submit" formtarget="_blank" value="提交到一個(gè)新的頁(yè)面上">

          19、height (new);width(new):屬性規(guī)定 <input> 元素的高度和寬度。 (只針對(duì)type="image")

          屬性值:pixels

          <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48" />

          20、max (new);min(new):屬性規(guī)定 <input> 元素的最大值和最小值。

          屬性值:number;date

           <input type="date" name="bday" max="1979-12-31">
            <input type="date" name="bday" min="2000-01-02">  
          <input type="number" name="quantity" min="1" max="5">

          21、multiple (new):屬性規(guī)定允許用戶輸入到 <input> 元素的多個(gè)值。

          屬性值:multiple

          <input type="file" name="img" multiple>

          注意:multiple 適用于以下 input 類(lèi)型:email 和 file。

          22、pattern (new):pattern 屬性規(guī)定用于驗(yàn)證 <input> 元素的值的正則表達(dá)式。

          屬性值:regexp;

          <form action="demo_form.html">
             Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
             <input type="submit">
          </form>

          23、placeholder (new): 屬性規(guī)定可描述輸入 <input> 字段預(yù)期值的簡(jiǎn)短的提示信息 。

          屬性值:text

          <input placeholder="請(qǐng)輸入姓名" />

          24、src : src 屬性規(guī)定顯示為提交按鈕的圖像的 URL。 (只針對(duì) type="image")

          屬性值:URL

          <input type="image" src="submit.gif" alt="Submit" />

          25、step (new): step 屬性規(guī)定 <input> 元素的合法數(shù)字間隔。

          屬性值:number

          <input type="number" name="points" step="3">

          26、list(new) :屬性引用 <datalist> 元素,其中包含 <input> 元素的預(yù)定義選項(xiàng)。

          屬性值:datalist_id

          <input list="browsers">
          
          <datalist id="browsers">
            <option value="Internet Explorer">
            <option value="Firefox">
            <option value="Google Chrome">
            <option value="Opera">
            <option value="Safari">
          </datalist>

          27、type: type 屬性規(guī)定要顯示的 <input> 元素的類(lèi)型。

          屬性值:button;checkbox;color;date;datetime;datetime-local;email;file;hidden;image;month;number;password;radio;range;reset;search;submit;tel;text;time;url;week

          type的屬性值眾多,也是用的比較多的一個(gè)。

          button:定義可點(diǎn)擊的按鈕(通常與 JavaScript 一起使用來(lái)啟動(dòng)腳本)。

          checkbox:定義復(fù)選框。

          color(new):定義拾色器。

          date(new):定義 date 控件(包括年、月、日,不包括時(shí)間)。

          datetime(new):定義 date 和 time 控件(包括年、月、日、時(shí)、分、秒、幾分之一秒,基于 UTC 時(shí)區(qū))。

          datetime-local(new):定義 date 和 time 控件(包括年、月、日、時(shí)、分、秒、幾分之一秒,不帶時(shí)區(qū))。

          email(new):定義用于 e-mail 地址的字段。file定義文件選擇字段和 "瀏覽..." 按鈕,供文件上傳。

          hidden:定義隱藏輸入字段。

          image:定義圖像作為提交按鈕。

          month(new):定義 month 和 year 控件(不帶時(shí)區(qū))。

          number(new):定義用于輸入數(shù)字的字段。

          password:定義密碼字段(字段中的字符會(huì)被遮蔽)。

          radio:定義單選按鈕。

          range(new):定義用于精確值不重要的輸入數(shù)字的控件(比如 slider 控件)。

          reset:定義重置按鈕(重置所有的表單值為默認(rèn)值)。

          search(new):定義用于輸入搜索字符串的文本字段。

          submit:定義提交按鈕。

          tel(new):定義用于輸入電話號(hào)碼的字段。

          text:默認(rèn)。定義一個(gè)單行的文本字段(默認(rèn)寬度為 20 個(gè)字符)。

          time(new):定義用于輸入時(shí)間的控件(不帶時(shí)區(qū))。

          url(new):定義用于輸入 URL 的字段。

          week(new):定義 week 和 year 控件(不帶時(shí)區(qū))。

          制 input 輸入框只能輸入純數(shù)字

          1、onkeyup = "value=value.replace(/[^\d]/g,'')"
          

          使用 onkeyup 事件,有 bug ,那就是在中文輸入法狀態(tài)下,輸入漢字之后直接回車(chē),會(huì)直接輸入字母

          2、onchange = "value=value.replace(/[^\d]/g,'')"
          

          使用 onchange 事件,在輸入內(nèi)容后,只有 input 喪失焦點(diǎn)時(shí)才會(huì)得到結(jié)果,并不能在輸入時(shí)就做出響應(yīng)

          3、oninput = "value=value.replace(/[^\d]/g,'')"
          

          使用 oninput 事件,完美的解決了以上兩種問(wèn)題,測(cè)試暫時(shí)還沒(méi)有出現(xiàn)其它問(wèn)題。

          代碼示例

          <!DOCTYPE html>
          <html lang="en">
          <head>
           <meta charset="UTF-8" />
           <title>input</title>
          </head>
           <body>
           只能輸入純數(shù)字的輸入框:
           <input type="text" name="" οninput="value=value.replace(/[^\d]/g,'')">
           </body>
          </html>
          

          以上代碼均已在谷歌、火狐、百度、UC、IE11、360急速、QQ、Edge瀏覽器下測(cè)試完畢,請(qǐng)放心使用.

          ————————————————

          版權(quán)聲明:本文為CSDN博主「此去幾何」的原創(chuàng)文章,遵循CC 4.0 by-sa版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

          原文鏈接:https://blog.csdn.net/w6990548/article/details/79388905


          主站蜘蛛池模板: 国产精品分类视频分类一区| 无码一区二区三区| 日韩精品一区二区三区中文 | 国产成人一区二区三区电影网站| 亚洲国产激情一区二区三区| 海角国精产品一区一区三区糖心| 亚洲av不卡一区二区三区| 99久久精品国产免看国产一区 | 麻豆一区二区在我观看 | 亚洲制服中文字幕第一区| 国产午夜精品一区理论片飘花| 性盈盈影院免费视频观看在线一区| 制服丝袜一区在线| 一区二区在线免费观看| 无码精品一区二区三区在线| 国产一区二区电影在线观看| 制服丝袜一区二区三区| 久久精品国产一区二区三区不卡| 日韩精品无码人妻一区二区三区| 国产精品伦子一区二区三区| 国产主播一区二区三区在线观看 | 日韩有码一区二区| 动漫精品一区二区三区3d| 后入内射国产一区二区| 一区二区三区免费电影| 相泽亚洲一区中文字幕| 国产一区二区三区久久| 日韩高清国产一区在线| 在线观看一区二区三区av| 日韩精品中文字幕视频一区 | 在线成人一区二区| 风间由美在线亚洲一区| 日韩一区二区三区精品| 色狠狠色噜噜Av天堂一区| 免费视频精品一区二区三区| 国产精品视频分类一区| 国产无人区一区二区三区 | 亚洲日本久久一区二区va| 欧美成人aaa片一区国产精品 | 精品一区二区三区在线视频观看| 一区二区三区四区视频在线|