Dollar Amount Input UI Test - Firefox Compatibility

Developer
Bryan
Size
3,337 Kb
Views
8,096
  1. Dollar Amount Input UI Test - Firefox Compatibility Previews
  2. Dollar Amount Input UI Test - Firefox Compatibility HTML Codes
  3. Dollar Amount Input UI Test - Firefox Compatibility CSS Codes
  4. Dollar Amount Input UI Test - Firefox Compatibility JS Codes

How do I make an dollar amount input ui test - firefox compatibility?

Recreating the Square Cash App's dollar input field functionality.. What is a dollar amount input ui test - firefox compatibility? How do you make a dollar amount input ui test - firefox compatibility? This script and codes were developed by Bryan on 29 November 2022, Tuesday.

Dollar Amount Input UI Test - Firefox Compatibility Previews
IQ Test

Dollar Amount Input UI Test - Firefox Compatibility - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dollar Amount Input UI Test - Firefox Compatibility</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper"><span class="sup" id="symbol">$</span> <input id="dollar" type="tel" maxlength="4" value="0"/> <input class="sup hid" id="cents" type="tel" maxlength="2"/>
</div> <script src="js/index.js"></script>
</body>
</html>

Dollar Amount Input UI Test - Firefox Compatibility - Script Codes CSS Codes

body { background: #F5F5F5; padding: 50px;
}
.wrapper { background: #FFF; box-shadow: 0 30px 50px #B5B5B5; width: 460px; margin: 0 auto; text-align: center; padding: 20px; position: relative;
}
.sup { color: #C6C6C6; font-size: 41px; position: relative; top: 30px; left: 10px;
}
input { border: none; font-size: 150px; color: #93C13A; vertical-align: top; text-align: center; outline: none; margin: 0 auto; min-width: 90px;
}
input#cents.sup { font-size: 50px; font-style: italic; min-width: 40px; width: 60px; color: #93C13A; left: -10px; text-align: left;
}
.hid { display: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;
}
input[type="number"] { -moz-appearance: textfield;
}

Dollar Amount Input UI Test - Firefox Compatibility - Script Codes JS Codes

var dollarAmt = document.getElementById("dollar");
var centsAmt = document.getElementById("cents");
function setDefaultValue() {	dollarAmt.addEventListener('input', function(e) {	if (this.value.length < 1) {	this.value = 0;	}	}, false);
}
function handleInputValues() {	dollarAmt.addEventListener('keypress', function(e) {	e = e || window.event;	var thekeycode = e.which ? e.keyCode : e.charCode;	// Allow only numbers	if (thekeycode <= 47 || thekeycode >= 58) {	e.preventDefault();	} else if (dollarAmt.value[0] === "0") {	e.preventDefault();	dollarAmt.value = String.fromCharCode(e.keyCode);	dollarAmt.value.replace(dollarAmt.value[0], "");	}	if (thekeycode === 46) {	e.preventDefault();	centsAmt.className = "sup";	centsAmt.focus();	}	}, false);	centsAmt.addEventListener('keypress', function(e) {	e = e || window.event;	var cursorPos = 0;	var thekeycode = e.which ? e.keyCode : e.charCode;	if (thekeycode <= 47 || thekeycode >= 58) {	e.preventDefault();	}	}, false);	centsAmt.addEventListener('keydown', function(e) {	e = e || window.event;	var thekeycode = e.keyCode;	if(thekeycode === 8 && centsAmt.value === "") {	e.preventDefault();	centsAmt.className += " hid";	dollarAmt.focus();	}	}, false);
}
function inputWidth(defaultAmt) {	dollarAmt.style.width = "100px";	dollarAmt.addEventListener('input', function(e) {	this.style.width = ((this.value.length) * 90) + 'px';	}, false);
}
function inputClear() {	dollarAmt.addEventListener("onkeydown", keyDownTextField, false);	function keyDownTextField(e) {	var keyCode = e.keyCode;	console.log(keyCode)	}
}
setDefaultValue();
inputWidth();
inputClear();
handleInputValues();
Dollar Amount Input UI Test - Firefox Compatibility - Script Codes
Dollar Amount Input UI Test - Firefox Compatibility - Script Codes
Home Page Home
Developer Bryan
Username Brydave
Uploaded November 29, 2022
Rating 3
Size 3,337 Kb
Views 8,096
Do you need developer help for Dollar Amount Input UI Test - Firefox Compatibility?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Bryan (Brydave) Script Codes
Name
JQuery Slider Practice
Window Blinds Dropdown
Dollar Amount Input UI Test
Everyone, just calm down...
CSS Animated Hamburger Icon
Contact Card
A Pen by Bryan
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!