使用 Javascript onkeyup() 更改 IE8 中的不透明度（再次）

Posted 2023-03-06

技术标签:

【中文标题】使用 Javascript onkeyup() 更改 IE8 中的不透明度（再次）【英文标题】：Changing opacity in IE8 using Javascript onkeyup() (again) 【发布时间】：2012-04-26 07:00:30 【问题描述】：

对于发布另一个 IE 不透明性问题，我提前道歉，但我已经阅读了至少 30 个不同的页面（许多在 SO）并且无法使其正常工作。

我正在尝试根据用户在卡号 <input> 字段中输入的第一个字符来动态更改美国 4 种主要信用卡类型（Visa、MC、Amex、Discover）的不透明度。

我的代码在 IE9、Firefox、Safari 和 Chrome 中运行良好，但当然不是 IE8，这是 Windows XP 支持所必需的。

我尝试使用以下设置：

object.style.filter = 'alpha(opacity=13)';
object.filter = 'alpha(opacity=13)';
object.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=13)';

我什至尝试将 Opacity 中的 O 大写，没想到它会有所帮助...

有人知道我错过了什么吗？

JQuery 解决方案很好，但出于学术原因，我想知道是否可以在 javascript 中使用...

我有以下 html：

<span>
  <input name='cardnumber' value="3717XXXXXXX8775" type='text' id='cardnumber' onkeyup='setCardType();'>
</span>
<span>
  <img src='/style/icon_visa.gif' id='visa' alt='This is a Visa' style='opacity:.13;filter:alpha(opacity=13);'>&nbsp;&nbsp;
  <img src='/style/icon_mastercard.gif' id='mastercard' alt='This is a MasterCard' style='opacity:.13;filter:alpha(opacity=13);'>&nbsp;&nbsp;
  <img src='/style/icon_amex.gif' id='amex' alt='This is an American Express' style='opacity:1;filter:alpha(opacity=100);'>&nbsp;&nbsp;
  <img src='/style/icon_discover.gif' id='discover' alt='This is a Discover Card' style='opacity:.13;filter:alpha(opacity=13);'>
</span>
<input type='hidden' name='cardtype' id='cardtype' value="American Express">

以及以下 Javascript：

function setCardType() 
var cardnumber = document.getElementById('cardnumber').value;
cardnumber = cardnumber.replace(/[^0-9]/g,'');
document.getElementById('cardnumber').value = cardnumber;

var firstchar = document.getElementById('cardnumber').value.charAt(0);
if (firstchar == 3) 
    if (document.getElementById('visa').style.opacity) 
        document.getElementById('visa').style.opacity = .13;
        document.getElementById('mastercard').style.opacity = .13;
        document.getElementById('amex').style.opacity = 1;
        document.getElementById('discover').style.opacity = .13;
    
    else 
        document.getElementById('visa').style.filter = 'alpha(opacity=13)';
        document.getElementById('mastercard').style.filter = 'alpha(opacity=13)';
        document.getElementById('amex').style.filter = 'alpha(opacity=100)';
        document.getElementById('discover').style.filter = 'alpha(opacity=13)';
    
    document.getElementById('confirmCardType').innerHTML = 'American Express';

else if (firstchar == 4) 
    if (document.getElementById('visa').style.opacity) 
        document.getElementById('visa').style.opacity = 1;
        document.getElementById('mastercard').style.opacity = .13;
        document.getElementById('amex').style.opacity = .13;
        document.getElementById('discover').style.opacity = .13;
    
    else 
        document.getElementById('visa').style.filter = 'alpha(opacity=100)';
        document.getElementById('mastercard').style.filter = 'alpha(opacity=13)';
        document.getElementById('amex').style.filter = 'alpha(opacity=13)';
        document.getElementById('discover').style.filter = 'alpha(opacity=13)';
    
    document.getElementById('confirmCardType').innerHTML = 'Visa';

else if (firstchar == 5) 
    if (document.getElementById('visa').style.opacity) 
        document.getElementById('visa').style.opacity = .13;
        document.getElementById('mastercard').style.opacity = 1;
        document.getElementById('amex').style.opacity = .13;
        document.getElementById('discover').style.opacity = .13;
    
    else 
        document.getElementById('visa').style.filter = 'alpha(opacity=13)';
        document.getElementById('mastercard').style.filter = 'alpha(opacity=100)';
        document.getElementById('amex').style.filter = 'alpha(opacity=13)';
        document.getElementById('discover').style.filter = 'alpha(opacity=13)';
    
    document.getElementById('confirmCardType').innerHTML = 'MasterCard';

else if (firstchar == 6) 
    if (document.getElementById('visa').style.opacity) 
        document.getElementById('visa').style.opacity = .13;
        document.getElementById('mastercard').style.opacity = .13;
        document.getElementById('amex').style.opacity = .13;
        document.getElementById('discover').style.opacity = 1;
    
    else 
        document.getElementById('visa').style.filter = 'alpha(opacity=13)';
        document.getElementById('mastercard').style.filter = 'alpha(opacity=13)';
        document.getElementById('amex').style.filter = 'alpha(opacity=13)';
        document.getElementById('discover').style.filter = 'alpha(opacity=100)';
    
    document.getElementById('confirmCardType').innerHTML = 'Discover';

else 
    if (document.getElementById('visa').style.opacity) 
        document.getElementById('visa').style.opacity = .13;
        document.getElementById('mastercard').style.opacity = .13;
        document.getElementById('amex').style.opacity = .13;
        document.getElementById('discover').style.opacity = .13;
    
    else 
        document.getElementById('visa').style.filter = 'alpha(opacity=13)';
        document.getElementById('mastercard').style.filter = 'alpha(opacity=13)';
        document.getElementById('amex').style.filter = 'alpha(opacity=13)';
        document.getElementById('discover').style.filter = 'alpha(opacity=13)';
    
    document.getElementById('confirmCardType').innerHTML = '';

return true;

编辑：这是 jQuery 解决方案，它大大缩短了代码：

function setCardType() 
var cardnumber = document.getElementById('cardnumber').value;
cardnumber = cardnumber.replace(/[^0-9]/g,'');
document.getElementById('cardnumber').value = cardnumber;

var firstchar = cardnumber.charAt(0);
if (firstchar == 3) 
    $('#visa').css('opacity', .13);
    $('#mastercard').css('opacity', .13);
    $('#amex').css('opacity', 1);
    $('#discover').css('opacity', .13);
    document.getElementById('confirmCardType').innerHTML = 'American Express';

else if (firstchar == 4) 
    $('#visa').css('opacity', 1);
    $('#mastercard').css('opacity', .13);
    $('#amex').css('opacity', .13);
    $('#discover').css('opacity', .13);
    document.getElementById('confirmCardType').innerHTML = 'Visa';

else if (firstchar == 5) 
    $('#visa').css('opacity', .13);
    $('#mastercard').css('opacity', 1);
    $('#amex').css('opacity', .13);
    $('#discover').css('opacity', .13);
    document.getElementById('confirmCardType').innerHTML = 'MasterCard';

else if (firstchar == 6) 
    $('#visa').css('opacity', .13);
    $('#mastercard').css('opacity', .13);
    $('#amex').css('opacity', .13);
    $('#discover').css('opacity', 1);
    document.getElementById('confirmCardType').innerHTML = 'Discover';

else 
    $('#visa').css('opacity', .13);
    $('#mastercard').css('opacity', .13);
    $('#amex').css('opacity', .13);
    $('#discover').css('opacity', .13);
    document.getElementById('confirmCardType').innerHTML = '';

return true;

【问题讨论】：

【参考方案1】：

$("#visa").css("opacity", .13);

jQuery 自动为您处理交叉兼容性问题。太棒了……

【讨论】：

在阅读您的答案之前正要评论“IE8 不支持不透明度”。 +1！嘿，我知道这个是因为我也遇到了同样的问题，jQuery 也帮我解决了问题！这很好用，并且大大缩短了代码。感谢您的解决方案。我仍然想知道是否有人对问题有纯 Javascript 解决方案...

以上是关于使用 Javascript onkeyup() 更改 IE8 中的不透明度（再次）的主要内容，如果未能解决你的问题，请参考以下文章

Javascript 无法将现有函数应用于 onkeyup

JavaScript onKeyUp 时间延迟

JavaScript OnKeyUp修复了字母数字字符

Javascript onkeyup延迟函数调用[重复]

Javascript：在onkeyup事件中更改值时不会触发onchange事件[重复]

使用 Javascript onkeyup() 更改 IE8 中的不透明度（再次）