如何识别工作无须浏览器检测在“输入”事件的错误行为?(How to identify buggy b

2019-09-21 21:08发布

我会用这个问题开始。 当一个特定的浏览器有一个功能的越野车实现和你的JavaScript需要知道当前的浏览器是否有车执行或不那么它可以使用备用策略,你如何找出如果实现是越野车没有做浏览器类型嗅探(这通常被认为是坏的)?

这里的整个情况。

我正在想要使用的一些代码“输入”事件用于获取用户的变化通知到<input type="text">字段(不是“改变”事件的作品更活的),但是当该事件ISN “T的支持,它采用了更复杂的系统,涉及到很多其他的活动。

自“输入”事件在某些浏览器仅支持,我在寻找一个方式做特征检测的事件(而不是浏览器的用户代理嗅探),因为特征检测去一般是做事情的更健壮的方式。 因此,我碰上了这篇大文章整整这样做,这代码似乎工作:

var isEventSupported = (function(){
    var TAGNAMES = {
      'select':'input','change':'input',
      'submit':'form','reset':'form',
      'error':'img','load':'img','abort':'img'
    }
    function isEventSupported(eventName) {
      var el = document.createElement(TAGNAMES[eventName] || 'div');
      eventName = 'on' + eventName;
      var isSupported = (eventName in el);
      if (!isSupported) {
        el.setAttribute(eventName, 'return;');
        isSupported = typeof el[eventName] == 'function';
      }
      el = null;
      return isSupported;
    }
    return isEventSupported;
  })();

然后,我遇到的问题与IE(惊讶,意外)。 虽然IE浏览器声称支持“输入”事件,并将其传递上述功能测试,它工作的大部分时间,IE浏览器的支持是越野车的地狱。 它当用户点击退格键(其他失踪行为中)甚至不触发事件。 因此,我不能在IE浏览器依赖于它。 所以,我已经建立了这个干净的代码,做了功能测试“输入”事件,并使用它的存在时,当不存在使用这么多丑陋的变通涉及监测等八大事件非常干净的实现。 现在,它的破获在IE,因为“输入”事件的功能测试通过这样的代码试图使用它,但因此它不工作,它是越野车的地狱。

由于这些IE浏览器漏洞出现在用户的操作,我想不出什么办法来制定一个javascript功能测试来识别错误行为。 因此,我目前唯一的途径是诉诸浏览器嗅探和拒绝依靠“输入”标签,如果浏览器是IE。

是否有任何选择这里,用于识别,除了浏览器嗅探“输入”事件的错误行为? 如果一个人做浏览器嗅探,是有办法的行为,而不是用户代理字符串标识IE可以自由欺骗,并且不保证是准确的?

Answer 1:

杰米 - 佩特建议是这样的:

   var broken = false,
        ta = angular.element('<textarea>').on('input', function(evt) {
            broken = true;
        });
    ta.attr('placeholder', 'IESUCKS');

所以,你可以检查“支持输入事件,而不是‘破’”在你的代码。

见https://github.com/angular/angular.js/issues/2614?source=c



Answer 2:

如果你有兴趣在一个跨浏览器的“输入改变”事件,这里是我的实现:

function onInputChange(domInput, callback) {
    if (domInput.addEventListener) {
        domInput.addEventListener('input', callback, false); // Firefox, etc.
    } else if (domInput.attachEvent) {
        domInput.attachEvent('onpropertychange', callback); // IE
    }
}


用法示例:

var leInput = document.getElementById('myInput');
var leCallback = function () {
    // awesome stuff here
};

onInputChange(leInput, leCallback);


工程在所有浏览器,支持键盘输入和复制/粘贴。

然而,有是被诅咒的IE9,这并没有在我写上面的代码时存在的例外。 将微软曾经考虑固定的错误吗? :\



文章来源: How to identify buggy behavior in “input” event without browser detection?