Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Meela

imagem em botão submit não funciona no IE

Por , em Desenvolvimento frontend

Recommended Posts

Meela    0

Meela
Postado

Oi Gente!

Tô com um teclado virtual cujos botões precisam ter uma imagem de fundo, e isso não funciona no IE6 e IE7. (não me apedrejem até a morte, o negócio precisa funcionar no ie6 de qualquer jeito).

Em vez de aparecer a imagem de fundo, fica aquela imagem padrão de botões do ie. E quando mudo o tipo do input pra "image", daí o teclado virtual não funciona direito - ou seja, tem que ser no submit mesmo.

 

Como consertar?

 

Aí vai o código:

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Digite sua senha</title>
<style type="text/css">
body {
background-image:url(imgs/bg.jpg);
background-repeat:no-repeat;
overflow-x: hidden; overflow-y: hidden;
}
#saudacao {
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
position:absolute;
left: 548px;
width: 200px;
top: 20px;
text-align:left;
}
#campo1, #campo2, #campo3, #campo4, #campo5, #campo6, #campo7, #campo8 {
position:absolute;
width: 197px;
height: 62px;
background-image:url(../botao_bg.png);
font-size: 20px;
font-family:Arial, Helvetica, sans-serif;
color: #fff;
border: none;
}
#campo1 {
left: 25px;
top: 200px;
}
#campo2 {
left: 27px;
top: 307px;
}
#campo3{
left: 27px;
top: 416px;
}
#campo4 {
left: 29px;
top: 524px;
}
#campo5 {
left: 576px;
top: 198px;
}
#campo6 {
left: 577px;
top: 307px;
}
#campo7 {
left: 578px;
top: 417px;
}
#campo8 {
left: 577px;
top: 524px;
}
#visor {
position:absolute;
width: 130px;
height: 50px;
left: 335px;
top: 349px;
font-family:Arial, Helvetica, sans-serif;
font-size: 58px;
color: #a5a5a5;
text-align:center;
line-height: 50px;
}
</style>
<script language="javascript" type="text/javascript">

function Senha(valor)
{
//Objeto de acesso ao campo visor
var visor = document.getElementById('visor');
var valor = visor.value;
var maxlen = visor.getAttribute('maxlength');
if(visor.value.length >= maxlen)
	{
	visor.value = visor.value.substring(0,maxlen);
	document.getElementById('form1').submit();
	return false;
	}

	//Objeto de acesso ao campo hidden senha
var senha = document.getElementById("senha");
//Acrescenta o numero digitado ao visor e a senha
visor.value += '*';
senha.value += '*';
}
</Script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fixpng.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").fixPng();
});
</script>
</head>
<body scroll="no">
<div id="teclas">
<form name="form1" id="form1" action="sack.html" method="post" onMouseDown="javascript: Senha();" >
	<!-- Como deixamos o campo password cdesabilitado para digitação ele não envia as informações
	então utilizamos um campo hidden para postar a senha digitada e o password somente para 
	o usuario visualizar quantos numeros ja digitou -->
	<input type="hidden" name="senha" id="senha" maxlength="4" />
   <input type="button" style="background-image:url(imgs/alfa1.png);" src="../botao_bg.png" value="D   N   E   P   H" onClick="Senha(this.value)" id="campo1" />
<input type="button" value="A   R   G   T   S" onClick="Senha(this.value)" id="campo2"/>
   <input type="button"  value="V   B   X   I   L" onClick="Senha(this.value)" id="campo3"/>
         <input type="button" value="M   C   X   D   J" onClick="Senha(this.value)" id="campo4"/>
       <input type="button" value="X   N   O   P   Q" onClick="Senha(this.value)" id="campo5"/>
   <input type="button" value="V   R   S   T   U" onClick="Senha(this.value)" id="campo6"/>
         <input type="button" value="V   W   X   Y   Z" onClick="Senha(this.value)" id="campo7"/>
     <input type="button" value="V   A   X   D   Z" onClick="Senha(this.value)" id="campo8"/>
     <input type="text" name="visor" id="visor" maxlength="4" />
</form>
</div>

 

Obrigada!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

1) Procure utilizar a tag <button> ao invés de <input /> para fazer os botões, além de ser mais fácil para formatar, é mais semântico.

 

2) Ao utilizar <button>, faça o seguinte:

/* #campo1, #campo2, #campo3, #campo4, #campo5, #campo6, #campo7, #campo8 */
button {
       position:absolute;
       width: 197px;
       height: 62px;
       background:transparent url(../botao_bg.png) no-repeat;
       font-size: 20px;
       font-family:Arial, Helvetica, sans-serif;
       color: #fff;
       border: none;
}

 

3) Já que está utilizando jQuery, por favor, remova esses onclick, vai... :closedeyes:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meela    0

Meela
Postado

Oi, Paulo.

Peguei um código pronto pro teclado, não mexi muito nele com medo de dar problema.

 

E quanto a usar button em vez de input...não funcionou. Continua aparecendo o botão padrão.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meela    0

Meela
Postado

a página é pra rodar num sistema interno, não tenho como linkar ela.

Por botão padrão, eu digo isso:

botaowrong.jpg

 

quando na verdade eu preciso disso:

 

botaoright.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

- Certifique-se que esteja sendo salvo em escala RGB, preferencialmente a 16bits.

- Teste com outra imagem qualquer para comprovar que o caminho esteja sendo lido pelo IE.

- Envolva o endereço da url entre 'aspas'.

- Tome cuidado para não salvar o nome como Botão.png e chamar por botão.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meela    0

Meela
Postado

Quanto a isso está tudo certo.

Mas Evandro, se fosse qualquer uma dessas questões, o botão não funcionaria no IE8 também...e aí é que está, ele funciona certinho no 8, mas fica desse jeito no 6 e 7.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Não subestime as anormalidades do IE. Até mesmo o IE8 pode se mostrar um pesadelo em alguns cenários.

Seria possível postar como será feita a validação da senha?

Sabendo que tipo de dados o sistema espera eu poderia reescrever o código de alguma maneira mais amigável.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meela    0

Meela
Postado

Sim, eu sei bem o pesadelo que o IE8 pode ser. Tô tentando resolver um problema de javascript nele até agora.

 

Quanto à validação da senha, esta não será feita (é só um protótipo, qualquer coisa digitada passa, contanto que sejam 3 caracteres).

Aí vai o script:

 

<script language="javascript" type="text/javascript">

function Senha(valor) {
//Objeto de acesso ao campo visor
var visor = document.getElementById("visor");
//Objeto de acesso ao campo hidden senha
var senha = document.getElementById("senha");
//Acrescenta o numero digitado ao visor e a senha
visor.value += "*";
senha.value += "*";

	var maxlen = visor.getAttribute('maxlength');
if(visor.value.length >= maxlen)
	{
	visor.value = visor.value.substring(0,maxlen);
	document.getElementById('form1').submit();
	return false;
	}
}
</Script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Bom, independente da solução, a primeira coisa que precisa ser feita é utilizar um Doctype. Esse é sempre o ponto de partida... De nada adianta discutirmos isso ou aquilo se os requisitos mínimos e básicos não são atendidos... :closedeyes:

 

Então, Meela, faça isso, coloque um Doctype em sua página. Só assim teremos certeza de que os comportamentos serão mais parecidos independentemente do browser, aí sim depois partiremos para o problema de fato...

 

 

:joia:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Javascript

function criaBtn(){
			var letters = new Array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y');
			var form = document.getElementById('login');
			var visor = document.getElementById('visor');
			var btns = document.getElementById('botoes');
			var genButton = function(){
				var btn = document.createElement('button');
				btn.onclick = function(){
					form.password.value += this.value;
					visor.value += '*';
					if(visor.value.length > 2) {
						form.password.value = '[' + form.password.value.replace('][','],[') + ']';
						return form.submit();
					}
				}
				var vals = new Array();
				for(var i = 0, ln = letters.length; i < 5;){
					++i; --ln;
					var index = Math.random() * ln;
					var item = letters.splice(index, 1);
					vals.push(item);
				}
				btn.type = 'button';
				btn.value = '["' + vals.join('","') + '"]';
				btn.innerHTML = vals.join("\t");
				return btn;
			}
			for(var i = 0; i < 5; i++) {
				var li = document.createElement('li');
				li.appendChild(new genButton());
				btns.appendChild(li);
			}
		}

 

css

#botoes li {
			list-style: none;
			float: left;
			margin: 3px;
		}

		#botoes button {
			background: #000;
			border: 1px solid #000;
			color: #fff;
			display: block;
			font: normal inherit bold 14px sans-serif;
			height: 30px;
			letter-spacing: 0.3em;
			width: 150px;
		}

 

html

<form action="envia" method="post" id="login">
		<input type="password" id="visor">
		<input type="hidden" name="password">
		<ul id="botoes"></ul>
		<script type="text/javascript">criaBtn();</script>
	</form>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito