在前面

input输入框大家应该都很熟悉了吧，不知道大家有没有遇到过这样的一种情况：如上图，在中文输入过程中，输入的拼音也会触发input框的input事件，有些时候我们并不希望在中文输入的过程中拼音触发input事件。

在日常开发中，输入框是一个常见的组件，但是在拼音输入过程中，每次输入都会触发input事件，这可能会导致不必要的操作。本文将介绍一种解决该问题的Vue指令，使得在拼音输入过程中不会触发input事件，从而优化输入框体验。

效果展示

实现原理

1、compositionstart和compositionend事件

我们需要了解compositionstart和compositionend两个事件。当用户开始输入拼音时，会触发compositionstart事件，此时输入框的值并没有真正改变。随着输入的进行，最终会触发compositionend事件，此时输入框的值才会真正改变。我们可以通过监听这两个事件，来控制何时触发input事件。

具体实现方式是，在监听到compositionstart事件时，将输入框的值存储下来，然后在监听到compositionend事件时，再将输入框的值与之前存储的值进行比较，如果不同，则触发自定义的input事件，并将新值作为参数传递给监听器。

2、代码实现

（1）输入框

html复制代码<div class="input-text-title">正常情况</div>
<div class="input-text-content">{{ inputText }}</div>
<input
    placeholder="请输入"
    class="input-text"
    @input="doInput"
    id="inputContent"
/>

简单定义一个输入框，监听其input事件，inputText保存实时输入内容并展示到页面上。

（2）监听compositionstart和compositionend事件

javascript复制代码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);
    }
});

首先，我们通过getElementById方法获取到id为"inputContent"的输入框元素，并将其赋值给inputContent常量。

然后，我们给inputContent元素添加compositionstart事件的监听器。在事件触发时，会执行回调函数。在回调函数中，我们将isComposing变量设置为true，表示正在进行拼音输入，然后调用inputComplate方法处理输入框的值，并将输入框的值作为参数传递给inputComplate方法。

接下来，我们给inputContent元素添加compositionend事件的监听器。在事件触发时，同样会执行回调函数。在回调函数中，我们将isComposing变量设置为false，表示拼音输入结束，然后同样调用inputComplate方法处理输入框的值，并将输入框的值作为参数传递给inputComplate方法。

通过监听这两个事件，并在事件触发时调用相应的处理方法，我们可以实现在拼音输入过程中控制input事件的触发时机，从而达到不触发input事件的效果。

（3）input事件判断是否正在输入拼音

javascript复制代码inputComplate(value) {
    this.inputText = value;
},
doInput(event) {
    if (this.isComposing) return;
    const value = event.target.value;
    this.inputComplate(value);
},

输入框input事件绑定的是doInput方法，这个方法在这里只是用于过渡一下，在这里我们需要判断当前是否正在输入拼音，如果是在输入拼音的话我们就直接返回，不进行后续操作，如果不是的话则调用inputComplate进行后续处理，真正的处理逻辑应该是在inputComplate方法中。

这样我们就简单的完成了一个忽略拼音输入过程中的input事件的功能

本文到此结束

且慢，虽然上面这样操作之后可以得到一个可以忽略拼音输入过程中的input事件的输入框；但是，如果我们有很多个输入框需要加上这个功能呢？这样的话我们每写一个input框，想要加上这个功能的话不还得加一堆乱七八糟的代码来处理，这明显很不合理。

（4）封装成一个vue指令

javascript复制代码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事件监听器
        el.addEventListener("input", (event) => {
            if (isComposing) {
                return;
            }
            const value = event.target.value;
            // 处理输入框的值
            binding.value(value);
        });
    },
};
html复制代码<input
    placeholder="输入试试"
    class="input-text"
    v-JIgnorePinyin="doInput1"
/>

在bind钩子函数中，我们首先定义了两个变量isComposing和value，分别用于记录是否正在进行拼音输入和输入框的值。

然后，我们给输入框元素el添加compositionstart事件的监听器。在事件触发时，将isComposing设置为true，表示正在进行拼音输入，并将输入框的值赋给value。

接下来，我们给输入框元素el添加compositionend事件的监听器。在事件触发时，将isComposing设置为false，表示拼音输入结束。然后，我们比较value和输入框的当前值el.value是否相等，如果不相等，则说明输入框的值已经发生了变化，此时我们调用binding.value方法，将当前输入框的值el.value作为参数传递给绑定该指令的处理函数。

最后，我们给输入框元素el添加input事件的监听器。在事件触发时，首先判断isComposing的值，如果为true，则直接返回，不做任何处理。如果isComposing的值为false，说明拼音输入已经完成，此时我们获取输入框的值event.target.value，并将其作为参数调用binding.value方法，从而处理输入框的值。

通过定义这个自定义指令，我们可以在Vue组件中使用它来监听拼音输入过程中的事件，并执行相应的处理逻辑，从而实现更加灵活的输入框交互。

这样的话后面需要加功能只需要一个指令即可搞定。

组件库

组件文档

目前该组件也已经收录到我的组件库，组件文档地址如下： jyeontu.xyz/jvuewheel/#…

组件内容

组件库中还有许多好玩有趣的组件，如：

• 悬浮按钮
• 评论组件
• 词云
• 瀑布流照片容器
• 视频动态封面
• 3D轮播图
• web桌宠
• 贡献度面板
• 拖拽上传
• 自动补全输入框
• 图片滑块验证

等等……

组件库源码

组件库已开源到gitee，有兴趣的也可以到这里看看：gitee.com/zheng_yongt…

觉得有帮助的可以点个star~

有什么问题或错误可以指出，欢迎pr~

有什么想要实现的组件或想法可以联系我~

作者：JYeontu

链接：https://juejin.cn/post/7330439494666223642

nput框作为一个简单的输入框,你对它的属性知道有多少？
常见的属性（带new为h5新增属性）:

1、accept：accept 属性规定了可通过文件上传提交的服务器接受的文件类型。仅用于input的type类型为"file"的时候。

属性值：

audio/*，音频

video/* ，视频

image/* ，图片

MIME_type，一个有效的 MIME 类型，不带参数

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

// 如需规定多个值，请使用逗号分隔

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

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

属性值：text

value 属性对于不同 input 类型，用法也不同：

• 对于 "button"、"reset"、"submit" 类型 - 定义按钮上的文本
• 对于 "text"、"password"、"hidden" 类型 - 定义输入字段的初始（默认）值
• 对于 "checkbox"、"radio"、"image" 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。

注意：value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。

注意：value 属性不适用于 <input type="file">。

<input value="文本" />

3、name:表示的该文本输入框名称。用于表单提交后引用表单数据。只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

属性值：text

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

4、size：输入框的长度大小。

属性值：number

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

注意：size 属性适用于下面的 input 类型：text、search、tel、url、email 和 password。

5、maxlength：输入框中允许输入字符的最大数。

属性值：number

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

6、readonly：表示该框中只能显示，不能添加修改。

<input type="text" name="country" value="中国" readonly />

7、required（new）：属性规定必须在提交表单之前填写输入字段。

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

8、alt：定义图像输入的替代文本。 (只针对type="image")

属性值：text

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

9、autocomplete（new）：autocomplete 属性规定输入字段是否应该启用自动完成功能。

属性值：on/off，默认启动自动完成功能。

<input autocomplete="off" />

注意：autocomplete 属性适用于下面的 <input> 类型：text、search、url、tel、email、password、datepickers、range 和 color。

10、autofocus（new）：属性规定当页面加载时 <input> 元素应该自动获得焦点。

属性值：autofocus

<input type="text"  autofocus />

11、checked：checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")

属性值：checked

<input type="checkbox" name="vehicle" value="Car" checked />小汽车

12、disabled：disabled 属性规定应该禁用的 <input> 元素。

属性值：disabled

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

13、form（new）: form 属性规定 <input> 元素所属的一个或多个表单。

位于 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）:属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")

属性值：URL

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

注意：

formaction 属性规定当表单提交时处理输入控件的文件的 URL。

formaction 属性覆盖 <form> 元素的 action 属性。

15、formenctype（new）：属性规定当表单数据提交到服务器时如何编码(只适合 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 属性规定当表单数据提交到服务器时如何编码（仅适用于 method="post" 的表单）。

formenctype 属性覆盖 <form> 元素的 enctype 属性。

16、formmethod （new）：定义发送表单数据到 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="不验证提交">

18、formtarget （new）:规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")

属性值：_blank； _self； _parent； _top； framename

<input type="submit" formtarget="_blank" value="提交到一个新的页面上">

19、height （new）;width（new）:属性规定 <input> 元素的高度和宽度。 (只针对type="image")

属性值：pixels

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

20、max （new）;min（new）:属性规定 <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）：属性规定允许用户输入到 <input> 元素的多个值。

属性值：multiple

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

注意：multiple 适用于以下 input 类型：email 和 file。

22、pattern （new）：pattern 属性规定用于验证 <input> 元素的值的正则表达式。

属性值：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）： 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。

属性值：text

<input placeholder="请输入姓名" />

24、src : src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")

属性值：URL

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

25、step （new）: step 属性规定 <input> 元素的合法数字间隔。

属性值：number

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

26、list（new） :属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。

属性值：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 属性规定要显示的 <input> 元素的类型。

属性值：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的属性值众多，也是用的比较多的一个。

button：定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。

checkbox：定义复选框。

color（new）：定义拾色器。

date（new）：定义 date 控件（包括年、月、日，不包括时间）。

datetime（new）：定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。

datetime-local（new）：定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。

email（new）：定义用于 e-mail 地址的字段。file定义文件选择字段和 "浏览..." 按钮，供文件上传。

hidden：定义隐藏输入字段。

image：定义图像作为提交按钮。

month（new）：定义 month 和 year 控件（不带时区）。

number（new）：定义用于输入数字的字段。

password：定义密码字段（字段中的字符会被遮蔽）。

radio：定义单选按钮。

range（new）：定义用于精确值不重要的输入数字的控件（比如 slider 控件）。

reset：定义重置按钮（重置所有的表单值为默认值）。

search（new）：定义用于输入搜索字符串的文本字段。

submit：定义提交按钮。

tel（new）：定义用于输入电话号码的字段。

text：默认。定义一个单行的文本字段（默认宽度为 20 个字符）。

time（new）：定义用于输入时间的控件（不带时区）。

url（new）：定义用于输入 URL 的字段。

week（new）：定义 week 和 year 控件（不带时区）。

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

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

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

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