[英]Changing opacity in IE8 using Javascript onkeyup() (again)
IE opacity question, but I've read at least 30 different pages (many on SO) and can't make it work. 我提前为发布 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)';
我甚至尝试在不透明度中利用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);'>
<img src='/style/icon_mastercard.gif' id='mastercard' alt='This is a MasterCard' style='opacity:.13;filter:alpha(opacity=13);'>
<img src='/style/icon_amex.gif' id='amex' alt='This is an American Express' style='opacity:1;filter:alpha(opacity=100);'>
<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;
}
$("#visa").css("opacity", .13);
jQuery会自动为您处理交叉兼容性问题。 太好了......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.