-
-
Save S0liloquy/272284d3e5ce6577f08b23fa53b028da to your computer and use it in GitHub Desktop.
Change Form Field Input Types
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| window.onload = function() { | |
| //set up input styling | |
| var newStyle; | |
| getInputStyle(); | |
| //Use the setType function to update the input type. First parameter is input name, second is the input type. | |
| setType("phone","tel"); | |
| setType("email","email"); | |
| setType("date","date"); | |
| setType("phone","tel"); | |
| setType("color","color"); | |
| setType("number", "number"); | |
| function getInputStyle(){ | |
| var formId = '#'+$('.lp-pom-form').attr("id"); | |
| var styleClass1 = '.lp-pom-form-field input[type="text"]'; | |
| var styleClass2 = ".lp-pom-form-field input.text"; | |
| var legacyStyle = 'position: absolute; left: 0; margin-bottom: 12px;'; | |
| //Get basic field styling | |
| var stylesheet = document.styleSheets[0]; | |
| newStyle = ""; | |
| var ruleLength = stylesheet.cssRules.length; | |
| for(var i=0;i<ruleLength;i++){ | |
| if(stylesheet.cssRules[i].selectorText == formId+" "+styleClass1){ | |
| newStyle += document.styleSheets[0].cssRules[i].style.cssText; | |
| } | |
| if(stylesheet.cssRules[i].selectorText == formId+" "+styleClass2){ | |
| newStyle += document.styleSheets[0].cssRules[i].style.cssText; | |
| } | |
| } | |
| newStyle += legacyStyle; | |
| } | |
| function setType(id, newType){ | |
| document.getElementById(id).type = newType; | |
| document.getElementById(id).style.cssText = newStyle; | |
| } | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment