Question

我目前有一个调用javascript updateCart（）函数的输入字段。它使用onblur（）事件，当用户在字段外单击时，它可以正常工作。我遇到的问题是当用户按下＆＃34;输入＆＃34;时，我也需要它才能工作。键。所以，如果他们进入＆＃34; 23＆＃34;然后按回车键，onblur永远不会发生。

我试图使用onkeydow活动，但我遇到了问题。＆＃34; var qte＆＃34;在enterKey（）函数中始终为空。谁知道我做错了什么？我使用的是正确的活动吗？有没有更好的方法呢？

任何帮助都将不胜感激。

PS：我被迫只使用JavaScript。不幸的是没有jQuery。

<input type="text" name="qte_name" value="" size="3" onblur="updateCart('product1', this);"  onkeydown="enterKey(this, event, product1');" />

function updateCart(id, quantityObj) {
  var quantity = quantityObj.value;
  // calls appropriate Ajax code. All is fine here
} 

function enterKey(obj, e, id) {
    var key = document.all ? window.event.keyCode : e.which;
    var qte = obj.value; // Keeps appearing as blank

lastAction = key;                           
    if(key == 13) {         
       updateCart(id,obj);
       // I will forward to a new page here. Not an issue.
    }
}

Answer 1

HTML

<input type="text" id="qte_name" name="qte_name" value="" size="3" />

的JavaScript

var input = document.getElementById('qte_name');

input.addEventListener('blur', function(e) {
    updateCart('product1', this);
});

input.addEventListener('keypress', function(e) {
    if ((e.which || e.keyCode) == 13) {
        input.blur();
        updateCart('product1', this);
    }
});

function updateCart(id, quantityObj) {
  var quantity = quantityObj.value;
}

JS小提琴示例

<强> http://jsfiddle.net/uM8Qq/2/

Answer 2

一个快速建议是，删除内联函数调用。混合使用HTML和Javascript会使调试/维护变得更加困难。您可以在Javascript中设置它们。而不是这个突兀的线

<input type="text" name="qte_name" value="" size="3" onblur="updateCart('product1', this);"  onkeydown="enterKey(this, event, product1');" />

拥有html中的数据/结构

<input id="yourInput" type="text" name="qte_name" size="3"/>

你的javascript中的功能（只是示例代码除了测试之外什么也不做，但你会自己弄清楚）

var input = document.getElementById("yourInput");
    input.onblur=updateCart;   //Actually you don't need to pass any arguments
    input.onkeydown;=enterKey; //you may also want to pick other function names
function updateCart(event){
    console.assert(this instanceof HTMLInputElement); //check if this is set
    console.assert(this.name === "qte_name"); //so you can access the data
}
function enterKey(event){
    console.log(event.keyCode) //find out the desired keyCode you want to handle
    if(event.keyCode === 13){ 
        console.log("Enter was pressed");
        event.preventDefault(); //You are done and make sure no form submit happens
    }
}

将“this”作为函数中的参数传递（几乎）永远不是一个好主意。 “this”的重点在于它会自动设置并可以在函数上下文中使用。我敢打赌，这就是你的代码没有按你想象的那样行事的原因。

编辑：失去了好钱，但证明我的观点是永远不要下注知道“这个”肯定是什么，除非你测试它:)内联事件处理程序的情况实际上有点类似于new Function()构造函数。它包含在通用事件处理函数中。此通用事件处理函数设置为相应的属性。（现在我明白将this作为参数传递给函数的想法首先来自哪里）

element.onkeydown = function onKeyDown(event){
   //String you entered in the inline event handler
}

另一个提示，这只是我个人的意见，你不应该开始使用jQuery，直到你有足够的Javascript语言经验。它可以简化浏览器环境的使用，但它不会简化Javascript本身的语言，它使得理解一切实际如何工作并融合在一起变得更加困难。

所以无论谁强迫你不使用jQuery实际上对你有利。除非你是一名能够尽快获得成果的专业人士，只要你的目标是尽可能多地学习，就不要使用jQuery。

Answer 3

当我运行您的代码时，我收到语法错误，因为product1未正确引用

 onkeydown="enterKey(this, event, product1');"

应该是

 onkeydown="enterKey(this, event, 'product1');"

然后它工作正常http://jsfiddle.net/g27HT/但请注意以下内容

您不应该测试document.all，而应该测试您正在寻找的功能var key = window.event ? window.event.keyCode : e.which
您不应该使用内联HTML处理程序，它们会降低JS的可读性和可维护性。

JavaScript输入密钥而不传递输入值

3 个答案: