Question

我有一个JavaScript函数，我想在用户在input元素中输入文本后触发。目前我只能看到函数触发，如果我控制它.log它。如何使用keyup方法触发它？

相关代码如下。

var $ = function (selector) {
    var elements = [],
      i,
      len,
      cur_col,
      element,
      par,
      fns;

      if(selector.indexOf('#') > 0) {
        selector = selector.split('#');
        selector = '#' + selector[selector.length -1];
      }

      selector = selector.split(' ');

      fns = {
        id: function (sel) {
            return document.getElementById(sel);
        },
        get : function(c_or_e, sel, par) {
            var i = 0, len, arr = [], get_what = (c_or_e === 'class') ? "getElementsByClassName" : "getElementsByTagName";
            if (par.length) {
                while(par[I]) {
                    var temp = par[i++][get_what](sel);
                    Array.prototype.push.apply(arr, Array.prototype.slice.call(temp));
                }
            } else {
                arr = par[get_what](sel);
            }
            return (arr.length === 1)? arr[0] : arr;
        }
      };

      len = selector.length;
      curr_col = document;

      for ( i = 0; i < len; i++) {
        element = selector[i];
        par = curr_col;

        if( element.indexOf('#') === 0) {
            curr_col = fns.id(element.split('#'[1]));
          } else if (element.indexOf('.') > -1) {
            element = element.split('.');

            if (element[0]) {
                par = fns.get('elements', element[0], par);
                for ( i =0; par[i]; i++) {
                    if(par[i].className.indexOf(element[1]> -1)) {

                        elements.push(par[i]);
                    }
                }
                curr_col = elements;
            } else {
                curr_col = fns.get('class', element[1], par);
            }
          } else {
            curr_col = fns.get('elements', element, par);
          }
      }
    return elements;


};

Answer 1

您需要将方法绑定到页面上的keyup事件。

你可以尝试

document.addEventListener('keyup', $)

或者假设您将输入元素设为element，您可以

element.addEventListener('keyup', $)

如果您需要该信息触发或不触发函数中的事物，您的函数将被传递给event，您可以用它来调查元素的状态。

以下是快速示例，其中在按键上运行的功能为changeColor。

var COLORS = ['red', 'blue','yellow', 'black']
var NCOLORS = COLORS.length;
function changeColor(ev) {
  var div = document.getElementById('colored');
  var colorIdx = parseInt(Math.random() * NCOLORS);
  console.log(colorIdx);
  var newColor = COLORS[colorIdx];
  div.style.color = newColor
  console.log("New color ", newColor)
}
document.body.addEventListener('keyup', changeColor)

虽然我没有使用该事件（ev），但我希望在代码中显示我希望该变量可用。

在此处查看此行动 - http://codepen.io/bunnymatic/pen/yyLGXg

作为旁注，您可能会小心调用函数$。一些框架（如jQuery）使用该符号，您可能会遇到冲突，在这些冲突中，您将覆盖全局变量$，或者如果框架覆盖您的版本，则会发生冲突。

如何在keyup上调用我的函数？

1 个答案: