前几天在做项目时碰到了这么一件事，就是在input上面同时绑定onBlur事件和onPressEnter，而且这两个事件还同时使用一个方法处理逻辑，导致一个方法在onPressEnter事件后执行两次，就弄得像丈二的和尚一样，代码是这样的

<Input
  name="input"
  type="text"
  key={item.id}
  id={`${item.id}`}
  onPressEnter={this.onPressEnter(true);}
  onBlur={e => {
    this.onPressEnter(e, true);
  disabled={
    data.id && Fetherlist.length > 0 && detail === undefined
      ? !boxInputValue.box_code
      : !visibleIndex
  style={{ height: 40 }}
只要执行onPressEnter事件onPressEnter()方法就会执行两次，起初还以为是冒泡或者是捕获机制的原因，一通乱改，之后发现怎么调整都会触发两次，既然解决不了触发两次的情况了，就把注意力放在方法上，想着怎么通过if判断给它避开要执行的代码段，结果也是不理想，虽然是避开了onPressEnter事件，但又影响了onBlur事件的执行果然两者不能同时实现，想偷懒都不能够，然后通过浏览官网和各位大神的分享才知道当onPressEnter事件触发时就必然会出发onBlur事件，我的两个事件还使用的同一个方法。
 
当onPressEnter事件执行会默认触发失去焦点事件，这时候onBlur事件监听到input失去焦点了就会触发自己的方法，这时候两个事件用的是同一个放法，所以会触发两回，
 
就是在onPressEnter事件中手动调用失焦事件，让onPressEnter事件不执行已绑定的onPressEnter()方法
 
代码是这样实现的
 
<Input
  name="input"
  type="text"
  key={item.id}
  id={`${item.id}`}
  onPressEnter={e => {
    e.target.blur(e, true);
  onBlur={e => {
    this.onPressEnter(e, true);
  disabled={
    data.id && Fetherlist.length > 0 && detail === undefined
      ? !boxInputValue.box_code
      : !visibleIndex
  style={{ height: 40 }}
写的不好，望各位大佬不吝赐教
				
onchange
在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性! 且必须值变化才触发
onblur
与onchange基本相同，唯一的区别是 不管值是否变化，都触发
onkeyup
只要输入框内容发生变化即可触发，但是无法检测复制粘贴
附带方法，判断文本内容长度是否超限
function length...
				
先来看javascript的直接写在了input上  代码如下: <input name=”pwuser” type=”text” id=”pwuser” class=”input” value=”楼盘账号” onBlur=”if(this.value==”) this.value=’楼盘账号’;” onFocus=”if(this.value==’楼盘账号’) this.value=”;” /> <input name=”pwpwd” type=”password” class=”input1″ value=”******” onBlur=”if(this.value==”) this.va
				
<Form.Item label="邮箱" hasFeedback>
            {getFieldDecorator('email', {
              initialValue: userData.email,
              validateFirst: true,
              validateTrigger: 'onBlur...
				
在运用html+css+javascrpt进行页面制作时，我们往往会遇到一些影响用户体验，而又容易被我们忽视的小细节。比如，input输入框中的提示信息，怎样才能根据对象获得和失去焦点而实现其显示和隐藏。今天在这里，想跟大家分享一下这个小技巧，希望各位大神不要拍砖哦~~~ 一、要求 input输入框，在光标显示时，隐藏提示信息；光标离开输入框时，显示提示信息。 二、方法 1、给该input取id名，Onfocus=”方法名1(this)”，onblur=”方法名2(this)” 2、声明变量value，通过id名获得该input 3、function 方法名1(inputObj){  代码如下
  <input type="text" id="txtPrice" name = "txtPrice" value = "0"/>
现在我们为其动态添加一事件，JS核心代码如下：
document.getElementById("txtPrice").attachEvent('onblur', function (){alert('添加事件成功！')});
有时候为了实现不同浏览器之前的兼容，我们会这样写：
Code highlighti
				
如下所示：
<pre name=code class=html><input type=text onpaste=if(IsNum(window.clipboardData.getData('text'))==false) return false; class=input-txt-small id=productPrice onblur=checkprice('productPrice','pricedw')
                  onkeyup=if(isNaN(value))execCommand('undo') onafterpaste=
				
Vue中的oninput是监听input输入事件的一种方式。一般情况下，我们将oninput事件绑定到一个输入框上，在用户输入时，oninput事件会自动被执行。
当用户在输入框中输入内容时，Vue会根据当前输入框的值自动更新绑定的数据模型，从而实现了数据的双向绑定。这种双向绑定的特性极大地方便了我们在开发过程中对于用户输入数据的处理。
另外，Vue还提供了一些其他的input事件，比如onchange，onblur等等。每个事件有其特殊的用途，我们需要根据不同的需求来选择使用不同的事件。
总之，Vue的oninput事件是一个非常有用的功能，可以让我们更加方便地处理用户输入数据，提高开发效率和用户体验。