IE 11バグ - フォーム内部のラベル内の画像 - マウスイベントを保存する必要があります

重複してマークしないでください！IE 11バグ - フォーム内部のラベル内の画像 - マウスイベントを保存する必要があります

私は、これらのリソースを見てきました：

Image label for input in a form not clickable in IE11

IE 11 Bug - Image inside label inside form

https://snook.ca/archives/javascript/using_images_as

が、私は完全なコード例を掲載しましたので、解決への近い午前。

IE11ではフォーム内のラベル内のラジオボタンと画像がチェックされません。

マウス/ポインタイベントを保存するソリューションを探していますので、以下のJavascriptが動作します。

IEで動作させようとしているCSSとJavascriptを含む完全なコード例です。 5つ星評価システムのラジオボタンの代わりに星をクリックすることができます。あなたがそれらの上にマウスを置くと、星は明るくなります。だから、あなたが星3の上にマウスを置くと、それは星1,2および3を点灯させます。星をクリックすると、スター3、スター1、スター2、スター3が点灯したままになり、ホバリングの強調表示機能がオフになります。あなたがsay star twoをクリックすると、stars oneとtwoが点灯します。これは、IEを除くすべてのブラウザで美しく機能します。 IEでは、ラジオボタンはチェックされません。

また、私はJavascriptが繰り返しであり、控えめであることを知っていますが、（私にとってはとにかく）理解することも比較的簡単です。

インターネットでこのバグを一度に解決することを願っています！

CSS

.starRadioButton > input { /* HIDE RADIO */ 
    visibility: hidden; /* Makes input not-clickable (actually just hides it) */ 
    position: absolute; /* Remove input from document flow */ 
}

HTML

<form> 

    <label class="starRadioButton"> 

      <input type="radio" name="Rating" value="1" /> 

      <img title="Poor" alt="1" class="starOne" src="~/Content/star-grey.png" /> 

    </label> 


    <label class="starRadioButton"> 

      <input type="radio" name="Rating" value="2" /> 

      <img title="Fair" alt="2" class="starTwo" src="~/Content/star-grey.png" /> 

    </label> 


    <label class="starRadioButton"> 

     <input type="radio" name="Rating" value="3" /> 

     <img title="Good" alt="3" class="starThree" src="~/Content/star-grey.png" /> 

    </label> 


    <label class="starRadioButton"> 

     <input type="radio" name="Rating" value="4" /> 

     <img title="Very Good" alt="4" class="starFour" src="~/Content/star-grey.png" /> 

    </label> 


    <label class="starRadioButton"> 

     <input type="radio" name="Rating" value="5" /> 

     <img title="Excellent" alt="5" class="starFive" src="~/Content/star-grey.png" /> 

    </label>      

</form>

JAVASCRIPT

<script> 


$(function() 
{ 
    $(".starOne").hover(function() 
    { 
     $(".starOne").attr("src", "/Content/star-red.png"); 
    }, 
    function() 
    { 
     $(".starOne").attr("src", "/Content/star-grey.png"); 
    } 
    ); 
}); 

$(function() 
{ 
    $(".starTwo").hover(function() 
    { 
     $(".starOne").attr("src", "/Content/star-red.png"); 
     $(".starTwo").attr("src", "/Content/star-red.png"); 
    }, 
    function() 
    { 
     $(".starTwo").attr("src", "/Content/star-grey.png"); 
     $(".starOne").attr("src", "/Content/star-grey.png");    
    } 
    ); 
}); 

$(function() 
{ 
    $(".starThree").hover(function() 
    { 
     $(".starOne").attr("src", "/Content/star-red.png"); 
     $(".starTwo").attr("src", "/Content/star-red.png"); 
     $(".starThree").attr("src", "/Content/star-red.png"); 
    }, 
    function() 
    { 
     $(".starThree").attr("src", "/Content/star-grey.png"); 
     $(".starTwo").attr("src", "/Content/star-grey.png"); 
     $(".starOne").attr("src", "/Content/star-grey.png"); 
    } 
    ); 
}); 

$(function() 
{ 
    $(".starFour").hover(function() 
    { 
     $(".starOne").attr("src", "/Content/star-red.png"); 
     $(".starTwo").attr("src", "/Content/star-red.png"); 
     $(".starThree").attr("src", "/Content/star-red.png"); 
     $(".starFour").attr("src", "/Content/star-red.png"); 
    }, 
    function() 
    { 
     $(".starFour").attr("src", "/Content/star-grey.png"); 
     $(".starThree").attr("src", "/Content/star-grey.png"); 
     $(".starTwo").attr("src", "/Content/star-grey.png"); 
     $(".starOne").attr("src", "/Content/star-grey.png"); 
    } 
    ); 
}); 

$(function() 
{ 
    $(".starFive").hover(function() 
    { 
     $(".starOne").attr("src", "/Content/star-red.png"); 
     $(".starTwo").attr("src", "/Content/star-red.png"); 
     $(".starThree").attr("src", "/Content/star-red.png"); 
     $(".starFour").attr("src", "/Content/star-red.png"); 
     $(".starFive").attr("src", "/Content/star-red.png"); 
    }, 
    function() 
    { 
     $(".starFive").attr("src", "/Content/star-grey.png"); 
     $(".starFour").attr("src", "/Content/star-grey.png"); 
     $(".starThree").attr("src", "/Content/star-grey.png"); 
     $(".starTwo").attr("src", "/Content/star-grey.png"); 
     $(".starOne").attr("src", "/Content/star-grey.png"); 
    } 
    ); 
}); 

$(function() 
{ 
    StarOneHandler(); 
    StarTwoHandler(); 
    StarThreeHandler(); 
    StarFourHandler(); 
    StarFiveHandler(); 
}) 


function StarOneHandler() 
{ 
    $(".starOne").on("click", function() 
    { 
     $(".starOne").replaceWith('<img class="starOne" src="/Content/star-red.png" />'); 
     $(".starTwo").replaceWith('<img class="starTwo" src="/Content/star-grey.png" />'); 
     $(".starThree").replaceWith('<img class="starThree" src="/Content/star-grey.png" />'); 
     $(".starFour").replaceWith('<img class="starFour" src="/Content/star-grey.png" />'); 
     $(".starFive").replaceWith('<img class="starFive" src="/Content/star-grey.png" />'); 
     $(function() 
     { 
      StarOneHandler(); 
      StarTwoHandler(); 
      StarThreeHandler(); 
      StarFourHandler(); 
      StarFiveHandler(); 
     }); 
    }); 
} 

function StarTwoHandler() 
{ 
    $(".starTwo").on("click", function() 
    { 
     $(".starOne").replaceWith('<img class="starOne" src="/Content/star-red.png" />'); 
     $(".starTwo").replaceWith('<img class="starTwo" src="/Content/star-red.png" />'); 
     $(".starThree").replaceWith('<img class="starThree" src="/Content/star-grey.png" />'); 
     $(".starFour").replaceWith('<img class="starFour" src="/Content/star-grey.png" />'); 
     $(".starFive").replaceWith('<img class="starFive" src="/Content/star-grey.png" />'); 
     $(function() 
     { 
      StarOneHandler(); 
      StarTwoHandler(); 
      StarThreeHandler(); 
      StarFourHandler(); 
      StarFiveHandler(); 
     }); 
    }); 
} 

function StarThreeHandler() 
{ 
    $(".starThree").on("click", function() 
    { 
     $(".starOne").replaceWith('<img class="starOne" src="/Content/star-red.png" />'); 
     $(".starTwo").replaceWith('<img class="starTwo" src="/Content/star-red.png" />'); 
     $(".starThree").replaceWith('<img class="starThree" src="/Content/star-red.png" />'); 
     $(".starFour").replaceWith('<img class="starFour" src="/Content/star-grey.png" />'); 
     $(".starFive").replaceWith('<img class="starFive" src="/Content/star-grey.png" />'); 
     $(function() 
     { 
      StarOneHandler(); 
      StarTwoHandler(); 
      StarThreeHandler(); 
      StarFourHandler(); 
      StarFiveHandler(); 
     }); 
    }); 
} 

function StarFourHandler() 
{ 
    $(".starFour").on("click", function() 
    { 
     $(".starOne").replaceWith('<img class="starOne" src="/Content/star-red.png" />'); 
     $(".starTwo").replaceWith('<img class="starTwo" src="/Content/star-red.png" />'); 
     $(".starThree").replaceWith('<img class="starThree" src="/Content/star-red.png" />'); 
     $(".starFour").replaceWith('<img class="starFour" src="/Content/star-red.png" />'); 
     $(".starFive").replaceWith('<img class="starFive" src="/Content/star-grey.png" />'); 
     $(function() 
     { 
      StarOneHandler(); 
      StarTwoHandler(); 
      StarThreeHandler(); 
      StarFourHandler(); 
      StarFiveHandler(); 
     }); 
    }); 
} 

function StarFiveHandler() 
{ 
    $(".starFive").on("click", function() 
    { 
     $(".starOne").replaceWith('<img class="starOne" src="/Content/star-red.png" />'); 
     $(".starTwo").replaceWith('<img class="starTwo" src="/Content/star-red.png" />'); 
     $(".starThree").replaceWith('<img class="starThree" src="/Content/star-red.png" />'); 
     $(".starFour").replaceWith('<img class="starFour" src="/Content/star-red.png" />'); 
     $(".starFive").replaceWith('<img class="starFive" src="/Content/star-red.png" />'); 
     $(function() 
     { 
      StarOneHandler(); 
      StarTwoHandler(); 
      StarThreeHandler(); 
      StarFourHandler(); 
      StarFiveHandler(); 
     }); 
    }); 
}

出典

2016-09-21 nmit026

'img'を聞いて、' label'を聞くのではなく、これがオプションでない場合は、 'img'をラッパーに入れ、ラッパーのクリックを待ち受けることができます。このような星評価のスケールは、JSを使わずにCSSを使ってはるかに簡単にすることができます。私はあなたがこれを変更できる場合、いくつかの例を調べることをお勧めします。 – Qtax

私はこれを試していませんが、以下の解決策はうまくいきますが、他の人に役立つことを願っています。私はCSSに感謝します、ありがとう。 – nmit026

あなたは、ラベルへの入力とのために、属性にIDを設定しようとしました？

<label class="starRadioButton" for="rating4"><input type="radio" id="rating4" name="Rating" value="4" /> 

    <img title="Very Good" alt="4" class="starFour" src="~/Content/star-grey.png" /></label>

私はIEがラベル/入力に関して少し厳しいと思っています。

これは役に立たない場合は、入力にIDを設定し、クリックイベントリスナーを（たとえば）$（ "＃rating4"）。attr（ "checked"、true）で展開してみてください。

出典

2016-09-21 07:19:06

もう一つの可能性は、javascriptごとにチェックされたステータスを設定することです。あなたの入力にIDを設定し、クリックイベントリスナを$（ "＃rating4"）。attr（ "checked"、true）またはdocument.getElementById（ "rating4"）。checked = trueで展開します。または、クリックイベントを発生させる、ike $（ "＃rating4"）。trigger（ "click"）; –

クリックイベントリスナーで '$（"＃rating4 "）。attr（" checked "、true）を入れると、魅力的に機能しました。それをあなたの主な答えに入れて、それを受け入れたものとしてマークします。このバグの一般的な解決策ではありませんが、この場合はうまくいきます。私は盲目的にCSSソリューションを探して、明白なことを無視しました。本当にありがとう！ – nmit026

喜んで、私は助けることができます:)私は純粋なCSSソリューションを無視して、同じ誤解を犯しました。私は主な答えを変えました。 –

まず、入力のIDとラベルのfor-attributeを設定します。私はjQueryのを使用して、最後の行をコメントアウトし、生のJavascriptでそれを置き換える

function StarOneHandler() 
{ 
    $(".starOne").on("click", function() 
    { 
     $(".starOne").replaceWith('<img class="starOne" src="/Content/star-red.png" />'); 
     $(".starTwo").replaceWith('<img class="starTwo" src="/Content/star-grey.png" />'); 
     $(".starThree").replaceWith('<img class="starThree" src="/Content/star-grey.png" />'); 
     $(".starFour").replaceWith('<img class="starFour" src="/Content/star-grey.png" />'); 
     $(".starFive").replaceWith('<img class="starFive" src="/Content/star-grey.png" />'); 
     $(function() 
     { 
      StarOneHandler(); 
      StarTwoHandler(); 
      StarThreeHandler(); 
      StarFourHandler(); 
      StarFiveHandler(); 
     }); 

     //$("#radioOne").attr("checked", true); 
     document.getElementById("radioOne").checked = true; 
    }); 
}

注：

<label class="starRadioButton" for="radioOne"> 

    <input type="radio" id="radioOne" name="Rating" value="4" /> 

    <img title="Very Good" alt="4" class="starFour" src="~/Content/star-grey.png" /> 

</label>

ここでは、この問題を解決変更イベントリスナーです。コメントアウトされたjQuery行を使用すると、IE、Edgeでは最初にクリックしたスターのうち、Opera、Chrome、Mozilla、Safari、またはAndroidのいずれのスターでも表示されません。 document.getElementById行を使用すると問題はありません。なぜこのようなことが起こるのか分かりません。

出典

2016-09-22 01:01:13 nmit026

IE 11バグ - フォーム内部のラベル内の画像 - マウスイベントを保存する必要があります

答えて

関連する問題