8

私はこの問題を回避することができましたが、javascript のダブラーにすぎないので、なぜそれが起こるのか、また IE に input type="tel" を認識させる方法があるかどうかを知りたいと思っています。

バックストーリー: 調査サイトがホストする調査で、一部のテキスト入力の横に単位 ($/分/年) を追加する必要がありました。次のコードは、タイプを "tel" に変更するまでうまく機能します (モバイル デバイスに適切な数値キーボードを取得するため)。その後も FF、Safari、Chrome では動作しますが、IE では動作しません。私の場合、どのように修正したかをコメントアウトしました。

 SurveyEngine.addOnload(function()
{
/*Place Your Javascript Below This Line*/
  var questionId = this.questionId;
  var inputs = $(questionId).getElementsByTagName('input');
  var telId = "QR~"+questionId;

//get numeric keypad for mobile devices
// this is where I put "if (isIE()==false){" to get around the problem

document.getElementById(telId).type = 'tel'; //IE tells me this argument is invalid

//append "minutes"
for(var x = 0; x<inputs.length;x++){
var input = inputs[x];
if(input.id != undefined && input.type =='tel') //obviously in my fix added "|| type=='text'" to pick up the IEs
{
  var id = input.id;
  $(id).up().innerHTML = $(id).up().innerHTML + "minutes";
}}
});

html要素は

<div class='QuestionBody'>
    <div class='ChoiceStructure'>
                <input type='TEXT' autocomplete="off" id='QR~QID18' value='' class='InputText' name='QR~QID18~TEXT' style="width: 80px;" >
    </div>
</div>

ここで IE がチョークする理由についての考えは、興味深く、おそらく役立つでしょう。

4

2 に答える 2

9

残念ながら、IE はIE10TYPE=TELより前をサポートしていません。この型をマークアップで使用することは完全に有効です。

<input id="test" type="tel" />

ただし、これは単に無視され、IE はデフォルトのtextタイプになります。スクリプトでこの型を設定すると、IE はこれを有効な型として認識しないため、エラーが発生します。したがって、最初にブラウザがサポートしているかどうかを検出する必要があります。次のようなことができます：

function TelTest()
{
   var test = document.getElementById('test');
   return test.type == 'tel';
}

TelTest()true が返された場合は、ブラウザがデフォルトのタイプに戻っておらず、タイプを認識していることを意味します。texttel

ワーキングJSFiddle。

于 2012-09-17T02:42:42.257 に答える
1

I'd start with proper attribute value in the markup (as opposed to altering it with JS):

<input type="number" id="QR~QID18" ... />

A number input will fallback to a plain text input if it's not supported, and if you're after consistent cross-browser experience, try using a polyfill fallback or webshims for browsers that do not support certain HTML5.

Also, for your particular prefixing needs, it may be more appropriate to use a workaround that does not alter the value.

Side note: you shouldn't really be using tel type for non-telephone numbers, instead input[type=number] would be more correct.

于 2012-09-17T02:54:33.800 に答える