Mascara de Entrada
Olá amigos
Estou tentando fazer funcionar uma mascara de entrada de data em javascript, no IE fuciona perfeitamente, mas no FF não..
Só preciso da máscara de entrada da data, já que no VS2005 usando webform não existe algo para fazer isso.
Postei a mensagem no forum de ASP.NET (Veja o tópico)
Como estou achando que o problema é de javascript, vou postar aqui..
<script type="text/javascript" language="javascript"> function init() { if(document.addEventListener) // DOM 2 Events compliant { document.getElementById(txtDate1ID).addEventListener("keypress", ValidateDate, true); document.getElementById(txtNumber1ID).addEventListener("change", ValidateNumber, true); } else// if(window.event) { document.getElementById(txtDate1ID).onkeypress = ValidateDate; document.getElementById(txtNumber1ID).onchange = ValidateNumber; };}function ValidateNumber(evt) { var txtbox = null; if(!evt && window.event) { evt=window.event; txtbox = evt.srcElement; } else txtbox = evt.target; if (txtbox.value =="") return; //this is a regular expression for 2 decimals postion var re = /^(\+|-)?\d{1,6}(\.\d{1,2})?$/g; if (!re.test(txtbox.value)) { txtbox.style.borderBottom="maroon 1pt inset"; txtbox.style.borderRight="maroon 1pt inset"; txtbox.style.borderTop="red 2px outset"; txtbox.style.borderLeft="red 2px outset"; txtbox.style.textAlign="left"; var lbl= txtbox.parentNode.children[1]; if (!lbl) { lbl =document.createElement("<span>"); txtbox.parentNode.appendChild(lbl); } lbl.innerText="* Invalid number"; lbl.style.color="red"; } else { txtbox.style.textAlign="right"; txtbox.style.borderBottom="gainsboro 1pt groove"; txtbox.style.borderRight="gainsboro 1pt groove"; txtbox.style.borderTop="gray 2px outset"; txtbox.style.borderLeft="gray 2px outset"; var lbl= txtbox.parentNode.children[1]; if (lbl) { lbl.innerHTML =""; } } } function ValidateDate(evt) { var ret=false; var ValidationDateFormat = "01/01/1999"; var txt=null; var txtEntered=null; var txtBox=null; if(evt && evt.target) { txt = String.fromCharCode(evt.charCode); txtBox =evt.target; txtEntered = evt.target.value + txt; } else //if(event.keyCode ) { txt = String.fromCharCode(event.keyCode);; txtEntered = window.event.srcElement.value + txt; txtBox = window.event.srcElement; } //since I do not know what you will type next I am going to validate based on //the assumption that further characters will be valid var txtAssumedDate = txtEntered + ValidationDateFormat.slice(txtEntered.length); //A regular expression to validate that the date is in the format MM/DD/YYYY var re = /^(0[1-9]|1[0-2])\/([0-2]?\d|3[0-1])\/(1|2)\d{3}?$/g; var CancelEntry=false; if (re.test(txtAssumedDate)) { ret=true; re=/^(0[1-9]|1[0-2])$/g; if (re.test(txtEntered)) { txtBox.value=txtEntered + "/"; //alert(txtBox.value); CancelEntry=true; } re = /^(0[1-9]|1[0-2])\/([0-2]\d{1}|3[0-1])$/g; if (re.test(txtEntered)) { txtBox.value=txtEntered + "/2006"; CancelEntry=true; } } //if the assumed date matches the pattern if (CancelEntry) { if (evt && evt.target) evt.preventDefault(); else { event.returnValue=false; event.cancelBubble = true; } } return ret; } </script> <div style="width: 750px;"> <h2> Client-side validation of the TextBox server control</h2> <p> If I had to change the HTML objects on the browser based on validating the textboxes input I would not use the Validation server controls. I would validate using regular expressions and JavaScript on the client. </p> <p> Below you should see 2 examples of validation; one that simulates the masked text box for entering date. It would not allow you to type a character that does not match the date format specified. The other would verify the number to be of 2 decimals. </p> <p> To see the source code click on the link at the bottom of this section. For a more advanced demo on using regular expressions click on the demo on the side menu titled "Regular Expressions". </p> <table> <tr> <td> Please enter a date in the following format only MM/DD/YYYY: <asp:TextBox ID="txtDate1" runat="server" MaxLength="10" ></asp:TextBox> </td> </tr> <tr> <td> Please enter a number with 2 decimals only <asp:TextBox ID="txtNumber1" runat="server" ></asp:TextBox> </td> </tr> </table> </div>
Qualquer dica é bem-vinda.
Obrigado.
Discussão (5)
Carregando comentários...