I apologize in advance for posting another IE opacity question, but I've read at least 30 different pages (many on SO) and can't make it work.
I am trying to dynamically change the opacity of the 4 major credit card types in the US (Visa, MC, Amex, Discover) based on the first character that the user types in to the cardnumber <input>
field.
My code works fine in IE9, Firefox, Safari, and Chrome, but of course NOT IE8, which is needed for Windows XP support.
I have tried setting it with the following:
object.style.filter = 'alpha(opacity=13)';
object.filter = 'alpha(opacity=13)';
object.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=13)';
I even tried capitalizing the O in Opacity, not expecting it to help...
Does anyone know what I'm missing?
A JQuery solution is fine, but I'd like to know if it's possible in Javascript for academic reasons...
I have the following 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">
and the following 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;
}
EDIT: Here is the jQuery solution, which shortens the code considerably:
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 handles the cross compatibility issues for you automatically. It's wonderful...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.