2

をサポートしていない古いブラウザー用の shim を作成したいと考えています<input type="number">。

これらのブラウザではinput、 を に設定するtypeと、 がとしてnumber報告されるため、これは簡単に検出できます。これまでのところとても良い。typetext

そこで私がやりたいことは、すべてを見つけて<input type="number">、これらの古いブラウザーのイベントをフックすることです。

問題は、どうすればそれらを見つけることができるかということです。

  • $('input[type=number]').length === 0（もちろん）。
  • $('input[name=aKnownNumberField]')[0].type === 'text'繰り返しますが、これはそもそも特徴検出に使用されるチェックであるため、驚くことではありません。
  • $($('input[name=aKnownNumberField]')[0]).parent().html().indexOf('type="number"')(または HTML の同様のチェック) も失敗します。これは、返される HTML がブラウザーの DOM に基づいたものになるためです。

私の例ではjQueryを使用していますが、jQuery以外の回答には満足しています。

<input type="number">それらをサポートしていないブラウザーで検出するにはどうすればよいですか?

4

2 に答える 2

4

jQuery を使用している場合は、以下を使用して取得できます.filter()。

var $unsupported = $('input').filter(function() {
    return this.type !== $(this).attr('type');
});

これにより、サポートされていないすべての入力が選択されるため、フィルタリング機能を使用してさらに.filter('[type="number"]')フィルタリングするか、フィルタリング機能内からそれを実行することができます。

純粋な JS ソリューションは、それほど違いはありません。

var inputs = document.getElementsByTagName('input');

for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type === inputs[i].getAttribute('type')) {
        continue;
    }

    // inputs[i] isn't supported by the browser
}

そしてデモ: http://fiddle.jshell.net/PENRD

IETester でテストしたところ、IE6 まで動作しました。

于 2013-06-13T19:03:00.503 に答える
1 
$.expr[':'].realtype = function(objNode,intStackIndex,arrProperties,arrNodeStack)
{
  return $(objNode).attr('type')===arrProperties[3];
}

var numbers=$('input:realtype("number")');

jsfiddle: http://jsfiddle.net/kingmotley/3sMQf/2/

于 2013-06-13T19:33:47.733 に答える