如何识别“输入”中的错误行为事件没有浏览器检测？ [英] How to identify buggy behavior in "input" event without browser detection?

问题描述

我会从这个问题开始。当一个特定的浏览器具有某个特性的错误实现，并且您的javascript需要知道当前浏览器是否具有该错误实现，那么它可以使用备用策略，您如何确定实现是否可以在没有进行浏览器类型嗅探的情况下运行（这通常被认为是坏的）？

这是整个情况。

我正在开发一些代码希望使用输入事件获取通知用户更改为< input type =text> 字段（比更改事件更有效），但不支持该事件时，它使用一个更复杂的方案涉及一堆其他事件。

由于输入事件仅在某些浏览器中支持，所以我去寻找一种方法做事件的功能检测（而不是浏览器用户代理sniffi ng），因为特征检测通常是更有效的做事方式。因此，我遇到了这篇伟大的文章并且此代码似乎工作：

  var isEventSupported =（function（）{
 var TAGNAMES = {
'select'：'input'，'change'：'input'，
'submit'：'form'，'reset'：'form'，
'error'：'img'加载'：'img'，'abort'：'img'
} 
函数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; 
} 
返回isEventSupported ; 
} ）（）; 
  

然后，我遇到了IE的问题（惊喜，惊喜）。虽然IE声称支持输入事件，它通过上面的功能测试，它的工作大部分时间，IE的支持是错误的，因为地狱。当用户点击退格键（包括其他缺少的行为）时，它甚至不会触发该事件。因此，我不能依赖它在IE。所以，我已经建立了这个很好的干净的代码，为输入事件进行了功能测试，并使用它非常干净的实现，当不存在使用这个非常糟糕的工作涉及监控八个其他事件。现在，它在IE中被破坏，因为输入事件的功能测试通过，所以代码尝试使用它，但它是错误的，因为它不工作。

由于这些IE错误显示在用户操作上，我无法想到设计JavaScript功能测试来识别错误行为。因此，我唯一的目前路径是浏览器嗅探，如果浏览器是IE，则拒绝依赖输入标签。

除了浏览器嗅探，还有什么选择可以在输入事件中识别错误行为？如果一个人不得不做浏览器嗅探，有没有办法通过行为来识别IE，而不是一个可以自由欺骗的用户代理字符串，不能保证准确？

解决方案

jamie-pate建议如下：

  var broken = false，
 ta = angular.element（'< textarea>'）。on（'input'，function（evt）{
 broken = true; 
}）; 
 ta.attr（'placeholder'，'IESUCKS'）; 
  

所以你可以在你的代码中检查支持输入事件而不是坏 / p>

请参阅 https： //github.com/angular/angular.js/issues/2614?source=c

I'll start with the question. When a specific browser has a buggy implementation of a feature and your javascript needs to know whether the current browser has that buggy implementation or not so it can use an alternate strategy, how do you figure out if the implementation is buggy without doing browser type sniffing (which is generally considered bad)?

Here's the whole situation.

I was working on some code that wants to use the "input" event for getting notifications of user changes to an <input type="text"> field (works much more live than the "change" event), but when that event isn't supported, it uses a much more complicated scheme involving a bunch of other events.

Since the "input" event is only supported in some browsers, I went in search of a way to do feature detection for the event (rather than browser user agent sniffing) since feature detection is generally a more robust way of doing things. As such, I came across this great article for doing exactly that and this code seems to work:

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;
  })();

Then, I ran into problems with IE (surprise, surprise). While IE purports to support the "input" event and it passes the feature test above and it works most of the time, IE's support is buggy as hell. It doesn't even trigger the event when the user hits the backspace key (among other missing behaviors). As such, I can't rely on it in IE. So, I had built this nice clean code that did a feature test for the "input" event and uses it's very clean implementation when present and when not present used this much uglier work-around involving monitoring eight other events. Now, it's busted in IE because the feature test for the "input" event passes so the code attempts to use it, but it's buggy as hell so it doesn't work.

Since these IE bugs show up on user actions, I can't think of any way to devise a javascript feature test to identify the buggy behavior. As such, my only current path is to resort to browser sniffing and refuse to rely on the "input" tag if the browser is IE.

Are there any options here for identifying the buggy behavior in the "input" event besides browser sniffing? If one had to do browser sniffing, is there a way to identify IE by behavior rather than a user agent string that can be freely spoofed and isn't guaranteed to be accurate?

解决方案

jamie-pate suggest something like this:

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

So you can check for "supports input event and is not 'broken'" in your code.

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

这篇关于如何识别“输入”中的错误行为事件没有浏览器检测？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！