IE 11 Bug - 表单内部的图像 - 需要保留鼠标事件 [英] IE 11 Bug - Image inside label inside form - Need to preserve mouse events

查看：69
本文介绍了IE 11 Bug - 表单内部的图像 - 需要保留鼠标事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

请不要将此标记为重复！



我查看了这些资源：

用于输入的图片标签不可点击在IE11中



IE 11 Bug - 图像内部标签内部的形式

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



但是我已经发布了一个完整的代码示例。



表单中标签内的单选按钮和图像不检查IE11。 / p>

我正在寻找一种解决方案来保留鼠标/指针事件，以便下面的Javascript仍然有效。



是包含CSS和Ja的完整代码示例vascript，我正在尝试在IE中工作。它可以让你点击星星，而不是五星级评分系统中的单选按钮。当你盘旋在他们身上时，星星点亮。所以如果你在三颗星上悬停，它会点亮一颗，二颗和三颗星。一旦你点击一颗星星，比如说三星，星星一，二和三将保持点亮，悬停的高亮功能将关闭。如果你再点击说星二，星星一和星星二将点亮。这在除IE以外的所有浏览器中都能很好地工作。在IE中，单选按钮不检查。



另外我知道Javascript是重复和不雅的，但它对于理解也相对容易（对我来说）。



希望能够一劳永逸地为互联网解决这个问题！

CSS 

  .starRadioButton>输入{/ * HIDE RADIO * / 
 visibility：hidden; / *使输入不可点击（实际上只是隐藏它）* / 
位置：绝对; / *从文档流中移除输入* / 
}

HTML 

 < form> 
 
< label class =starRadioButton> 
 
< input type =radioname =Ratingvalue =1/> 
 
< img title =Pooralt =1class =starOnesrc =〜/ Content / star-grey.png/> 
 
< / label> 
 
 
< label class =starRadioButton> 
 
< input type =radioname =Ratingvalue =2/> 
 
< img title =Fairalt =2class =starTwosrc =〜/ Content / star-grey.png/> 
 
< / label> 
 
 
< label class =starRadioButton> 
 
< input type =radioname =Ratingvalue =3/> 
 
< img title =Goodalt =3class =starThreesrc =〜/ Content / star-grey.png/> 
 
< / label> 
 
 
< label class =starRadioButton> 
 
< input type =radioname =Ratingvalue =4/> 
 
  
< / label> 
 
 
< label class =starRadioButton> 
 
< input type =radioname =Ratingvalue =5/> 
 
< img title =Excellentalt =5class =starFivesrc =〜/ Content / star-grey.png/> 
 
< / label> 
 
< / form>

JAVASCRIPT 

 <脚本> 
 
 $ b $（function（）
 {
 $（。starOne）。hover（function（）
 {
 $（ .starOne）。attr（src，/Content/star-red.png）; 
}，
函数（）
 {
 $（。 attr（src，/Content/star-grey.png）; 
} 
）; 
}）; 
 $ b $（函数（）
 {
 $（。starTwo）。hover（函数（）
 {
 $（。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）; 
} 
）; 
}）; 
 $ b $（函数（）
 {
 $（。starThree）。hover（function（）
 {
 $（。starOne ）.attr（src，/Content/star-red.png）; 
 $（。starTwo）。attr（src，/Content/star-red.png）; 
 $（。starThree）。attr（src，/Content/star-red.png）; 
}，
函数（）
 {
 $（。starThree）。attr（src，/Content/star-grey.png）; 
 $（。starTwo）。attr（src，/ Content / （star-grey.png）; 
 $（。starOne）。attr（src，/Content/star-grey.png）; 
} 
）; 
}）; 
 $ b $（b 
 
 $（。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）; 
} 
）; 
}）; 
 $ b $（函数（）
 {
 $（。starFive）。hover（函数（）
 {
 $（。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）; 
}，
函数（）
 {
 $（。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）; 
} 
）; 
}）; 
 $ b $（function（）
 {
 StarOneHandler（）; 
 StarTwoHandler（）; 
 StarThreeHandler（）; 
 StarFourHandler（）; 
 StarFiveHandler（）; 
}）
 
 
函数StarOneHandler（）
 {
 $（。starOne）。on点击，函数（）
 {
 $（。starOne）。replaceWith（'< img class =starOnesrc =/ Content / star-red.png/>' ）; 
 $（。starTwo）。replaceWith（'< img class =starTwosrc =/ Content / star-grey.png/>'）; 
 $（ （'.starThree）。replaceWith（'< img class =starThreesrc =/ Content / star-grey.png/>'）; 
 $（。starFour）。replaceWith（'< ; img class =starFoursrc =/ Content / star-grey.png/>'）; 
 $（。starFive）。replaceWith（'< img class =starFivesrc = /Content/star-grey.png/>'）; 
 $（function（）
 {
 StarOneHandler（）; 
 StarTwoHandler（）; 
 StarThreeHandler（）; 
 StarFourHa ndler（）; 
 StarFiveHandler（）; 
}）; 
}）; 
 
 
函数StarTwoHandler（）
 {
 $（。starTwo）。on（click，function（）
 {
 $（。starOne）。replaceWith（'< img class =starOnesrc =/ Content / star-red.png/>'）; 
 $（。starTwo） .replaceWith（'< img class =starTwosrc =/ Content / star-red.png/>'）; 
 $（。starThree）。replaceWith（'< img class = starThreesrc =/ Content / star-grey.png/>'）; 
 $（。starFour）。replaceWith（'< img class =starFoursrc =/ Content / （< star-grey.png/>'）; 
 $（。starFive）。replaceWith（'< img class =starFivesrc =/ Content / star- grey.png/> '）; 
 $（function（）
 {
 StarOneHandler（）; 
 StarTwoHandler（）; 
 StarThreeHandler（）; 
 StarFourHandler（）; 
 StarFiveHandler（）; 
}）; 
}）; 
 
 $ b $函数StarThreeHandler（）
 {
 $（。starThree）。on（click，function（）
 {
 $（。starOne）。replaceWith（'< img class =starOnesrc =/ Content / star-red.png/>'）; 
 $（。starTwo） .replaceWith（'< img class =starTwosrc =/ Content / star-red.png/>'）; 
 $（。starThree）。replaceWith（'< img class = starThreesrc =/ Content / star-red.png/>'）; 
 $（。starFour）。replaceWith（'< img class =starFoursrc =/ Content / （< star-grey.png/>'）; 
 $（。starFive）。replaceWith（'< img class =starFivesrc =/ Content / star- grey.png/> '）; 
 $（function（）
 {
 StarOneHandler（）; 
 StarTwoHandler（）; 
 StarThreeHandler（）; 
 StarFourHandler（）; 
 StarFiveHandler（）; 
}）; 
}）; 
 
 
函数StarFourHandler（）
 {
 $（。starFour）。on（click，function（）
 {
 $（。starOne）。replaceWith（'< img class =starOnesrc =/ Content / star-red.png/>'）; 
 $（。starTwo） .replaceWith（'< img class =starTwosrc =/ Content / star-red.png/>'）; 
 $（。starThree）。replaceWith（'< img class = starThreesrc =/ Content / star-red.png/>'）; 
 $（。starFour）。replaceWith（'< img class =starFoursrc =/ Content / （< star-red.png/>'）; 
 $（。starFive）。replaceWith（'< img class =starFivesrc =/ Content / star- grey.png/> '）; 
 $（function（）
 {
 StarOneHandler（）; 
 StarTwoHandler（）; 
 StarThreeHandler（）; 
 StarFourHandler（）; 
 StarFiveHandler（）; 
}）; 
}）; 
 
 
函数StarFiveHandler（）
 {
 $（。starFive）。on（click，function（）
 {
 $（。starOne）。replaceWith（'< img class =starOnesrc =/ Content / star-red.png/>'）; 
 $（。starTwo） .replaceWith（'< img class =starTwosrc =/ Content / star-red.png/>'）; 
 $（。starThree）。replaceWith（'< img class = starThreesrc =/ Content / star-red.png/>'）; 
 $（。starFour）。replaceWith（'< img class =starFoursrc =/ Content / （star-red.png/>'）; 
 $（。starFive）。replaceWith（'< img class =starFivesrc =/ Content / star-red.png/> '）; 
 $（function（）
 {
 StarOneHandler（）; 
 StarTwoHandler（）; 
 StarThreeHandler（）; 
 StarFourHandler（）; 
 StarFiveHandler（）; 
}）; 
}）; 
}


解决方案



 <$ c 
解决方案

您是否尝试设置输入的id和标签的for-属性？ c>< label class =starRadioButtonfor =rating4>< input type =radioid =rating4name =Ratingvalue =4/>

我相信IE会比其他浏览器对标签/输入的要求更严格。
$ b

如果没有帮助，尝试设置一个Id到你的输入，并用（例如）$（＃rating4）。attr（checked，true）展开你的click事件监听器。

Please don't mark this as a duplicate!

I've looked at these resources:

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

but am no closer to a solution so I've posted a full code example.

A radio button and image inside a label inside a form doesn't check in IE11.

I'm looking for a solution that preserves mouse/pointer events so the Javascript below still works.

Here is the full code example including CSS and Javascript which I am trying to make work in IE. It lets you click stars instead of radio buttons in a five star rating system. The stars light up when you hover over them. So if you hover over star three, it lights up stars one, two and three. Once you click a star, say star three, stars one, two and three will stay lit up, and the hovering highlighting functionality switches off. If you then click say star two, stars one and two will light up. This works beautifully in all browsers except IE. In IE, the radio button doesn't check.

Also I know the Javascript is repetitive and inelegant, but it's also relatively easy (for me, anyway) to understand.

Hoping to solve this bug for the internet once and for all!

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

解决方案

Did you try to set an id to the inputs and the for-attribute to the labels?

<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>

I believe IE is a bit stricter then others browser regarding labels/inputs.

If that not help, try to set an Id to your inputs and expand your click event listener with (as example) $("#rating4").attr("checked", true).

这篇关于IE 11 Bug - 表单内部的图像 - 需要保留鼠标事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆