Ir para conteúdo

POWERED BY:

Arquivado

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

Wellington09

customizar layout HTML5

Por , em Javascript

Recommended Posts

Wellington09    1

Wellington09
Postado

Ai pessoal no html5 saiu o atributo(required) para a tag input e

quando tentamos enviar o form sem preencher aquela input que esta como

REQUIRED ele vai mostrar uma mensagem de alerta do proprio navegador e eu

queria saber se já da ou se no futuro poderemos personalizar a mensagem

via CSS como cores e fontes diferentes da API do HTML5 ?

mudar a cor do calendario da <input type="date" required /> etc

 

Alguem sabe de alguma novidade sobre isto que estou falando ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

única coisa que eu penso a respeito disso, está descrita aqui:

http://www.maujor.com/blog/2010/10/27/html5-usar-ou-nao-usar/

 

se for oque eu estou pensando, veja esse post:

http://forum.imasters.com.br/topic/423901-link-no-javascript/page__view__findpost__p__1672484

 

[vale a pena se meter nisso? dessa forma ? usando uma caracteristica de metalinguagem?]

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wellington09    1

Wellington09
Postado

única coisa que eu penso a respeito disso, está descrita aqui:

http://www.maujor.com/blog/2010/10/27/html5-usar-ou-nao-usar/

 

se for oque eu estou pensando, veja esse post:

http://forum.imasters.com.br/topic/423901-link-no-javascript/page__view__findpost__p__1672484

 

[vale a pena se meter nisso? dessa forma ? usando uma caracteristica de metalinguagem?]

 

eu já tinha lido sobre HTML5 no site do maujor e sobre o outro link que você passou mostrando um alerta personalizado em javascript...bom aqui não mudou nada , talvez eu esteja fazendo alguma coisa errada, mas vou bater cabeça em cima para ver o que estou fazendo de errado.

 

Resumindo eu só usei um 

alert('meu texto')

e joguei o codigo do EVANDO OLIVEIRA abaixo do alert

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado
joguei o codigo do EVANDO OLIVEIRA abaixo do alert

coloque antes amigo.

 

é um conceito básico de programação, você primeiro declara, e depois usa.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wellington09    1

Wellington09
Postado

eu já tinha feito isso e não tinha funcionada nem o alert

ex:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script>
window.alert = function(string){
   var el = document.createElement('div');
   el.style.background = '#000';
   el.style.border = 'double 2px #000';
   el.style.color = '#fff';
   el.style.padding = '6px';
   el.offsetTop = '30%';
   el.style.margin = '0 auto';
   el.style.width = '300px';
   el.style.textAlign = 'center';
   var btn = document.createElement('button');
   btn.onclick = function(){
       document.getElementsByTagName('body')[0].removeChild(el);
   };
   btn.innerHTML = 'OK';
   btn.style.width = '40px';
   btn.style.margin = '0 auto';
   btn.style.display = 'block';
   el.innerHTML = string;
   el.appendChild(btn);
   document.getElementsByTagName('body')[0].appendChild(el);
};
alert('teste')
</script>
</head>

<body>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

você não leu o tópico inteiro ne?!

 

window.alert = function(string){
   var el = document.createElement('div');
   el.style.background = '#000';
   el.style.border = 'double 2px #000';
   el.style.color = '#fff';
   el.style.padding = '6px';
   //el.offsetTop = '30%';
   el.style.margin = '0 auto';
   el.style.width = '300px';
   el.style.textAlign = 'center';
   var btn = document.createElement('button');
   btn.onclick = function(){
       document.getElementsByTagName('body')[0].removeChild(el);
   };
   btn.innerHTML = 'OK';
   btn.style.width = '40px';
   btn.style.margin = '0 auto';
   btn.style.display = 'block';
   el.innerHTML = string;
   el.appendChild(btn);
   document.getElementsByTagName('body')[0].appendChild(el);
};
window.onload = function()
{
alert('teste');
}

veja que aqui: 

 document.getElementsByTagName('body')[0].appendChild(el);

o script tenta usar um elemento do DOM.

o DOM ainda não está carregado, por isso falha..

 

usei o window.onload para esperar o DOM carregar, e então ai sim disparo o alert.

também comentei a linha do offsetTop, pois essa propriedade é apenas um getter, e dava erro em navegadores standard, como expliquei no topico que linkei.

 

teste agora.

Se acostume a apertar Ctrl+Shif+J no Firefox, para saber debugar teus scripts.

Compartilhar este post

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

Informação importante

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

  Aceito