8

ライブラリを使用して IE8 で HTML5 入力タイプを実行することは可能ですか??
たとえば、範囲を使用します。

Points: <input type="range" name="points" min="1" max="10">
<input type="submit" value="send">
4

5 に答える 5

5

IE8はをサポートしていません<input type="range">。古いブラウザでこれを実現する最もシームレスな方法は、サポートを検出し、必要に応じて「ポリフィル」を使用することです。ポリフィルは、通常、ネイティブの動作をエミュレートしようとするJavaScriptを使用して、古いブラウザにサポートを追加するように設計されています。

このページには、ポリフィルのすばらしいリストがあります。（そして、Modernizrは、これらの種類のもののサポートを検出するための優れた方法です。）そのリストには、さまざまな入力タイプのポリフィルがあります。

于 2012-12-21T01:24:00.297 に答える
3

modernizr を使用して、ブラウザーが HTML5 をサポートしているかどうかを確認できます。
そして、IE8で動作するJquery UI Sliderを使用できます

このページを確認してください: http://jqueryui.com/slider/
デモ: http://jsbin.com/eduren/1/edit

スライダー値/パーセント値を読み取るには:
var val = $('#slider').slider("option", "value");

于 2012-12-21T01:40:47.770 に答える
2

Ie8は、すべての「html5」入力タイプをテキストとしてレンダリングします。ただし、次のようなものを使用して、JavaScriptでこれらのタイプをターゲットにすることができます 

$('[type=range]').slider() //insert your favorite library here...

jqueryのタグが付いていないことは知っていますが、例はまだ十分に明確だと思います

于 2012-12-21T01:23:22.170 に答える
2

Chrome フレームは、Chrome エンジンを Trident のフードの下に置く Google プロジェクトです。

URL: http://www.google.com/chromeframe

私は自分自身を試したことはありません。ブラウザーにバグが発生した場合、私たちはそれを修正するか、回避策を見つけます。特に管理の観点から、私はアドオンの大ファンではありません。

もう 1 つのオプションは、modernizrライブラリを使用してブラウザーの機能を検出し、その回避策を見つけることです。抜け出すためのハックな方法が常にあります。html5 shivを使用すると、解決策を見つけることができます。これは、IE8 を扱うときに私が好む 2 番目のオプションです。よろしく。

于 2012-12-21T01:21:02.720 に答える
0

次のコードは、範囲入力を作成し、ブラウザーが範囲入力をサポートしていないバージョンの Internet Explorer であるかどうかを確認します。その場合は、div から範囲入力を作成し、Javascript コードを使用してインタラクティブにします。

<input name="range" id="range" type="range" min="1" max="10" />
<!--[if lt IE 10]>
  <div id="range_ie" style="position:relative; width:255px; height:15px; font-size:0px; cursor:default" onselectstart="return false">
    <div style="position:absolute; left:0px; top:5px; width:100%; height:30%; border-left:1px solid gray; border-top:1px solid gray; border-right:1px solid white; border-bottom:1px solid white; background:silver"></div>
    <div id="slider" style="position:absolute; left:0px; top:0px; width:5px; height:100%; border:1px solid gray; background:#EBEBEB; font-size:15px" onmousedown="document.onmousemove=changevalue">&nbsp;&nbsp;</div>
  </div>
  <script type="text/javascript">
    //Hide the <input> element, otherwise older versions of IE will just display it as a text input
    document.getElementById("range").style.display = "none";

    //If the user releases the mouse after changing the value of the range input, it should stop changing
    document.body.onmouseup = function() {
      document.onmousemove = function(){};
    };

    function changevalue(e) {
      //Get the value of the input from the position of the cursor
      range.value = ((navigator.appName.substring(0, 3) == "Net") ? e.pageX : event.x) * (range.max - range.min) / (document.getElementById("range_ie").style.width.substring(0, document.getElementById("range_ie").style.width.search("px"))) + Number(range.min);

      //Check that the value isn't out of bounds
      if (Number(range.value) > Number(range.max)) {
        range.value = range.max;
      }
      if (Number(range.value) < Number(range.min)) {
        range.value = range.min;
      }

      //Move the slider to its new position
      document.getElementById("slider").style.left = (range.value - range.min) * Number(document.getElementById("range_ie").style.width.substring(0, document.getElementById("range_ie").style.width.search("px"))) / (Number(range.max) - Number(range.min)) + "px";
    }

    //If we click on the slider just like that, it should move
    document.getElementById("range_ie").onclick = changevalue;
  </script>
<![endif]-->

于 2014-11-23T15:37:22.373 に答える