Code Snippet </> Info
Snippet Name: United States of America Currency Format
Description: Check out the awesome HTML5 United States of America Currency Format INPUT alternative widgets. Example: View Code Demo
Note:
Author:
Last Modified: 2015-08-26 22:21:41
Language: html5
Highlight Mode: html
|
Copy Codes: Use Free Notepad ++ |
|
Snap HTML Code Editor: Paste the source code, make changes and instantly see it in live preview. Snap HTML Code Editor
|
|
Copied To Clipboard!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>HTML5 United States of America Currency Format Inputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="http://w2ui.com/web/css/bootstrap.css" rel="stylesheet">
<script src="http://w2ui.com/web/js/jquery-1.9.1.min.js"></script>
<script src="http://w2ui.com/web/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://w2ui.com/web/js/CodeMirror/lib/codemirror.css">
<script src="http://w2ui.com/web/js/CodeMirror/lib/codemirror.js"></script>
<script src="http://w2ui.com/web/js/CodeMirror/mode/javascript.js"></script>
<script src="http://w2ui.com/web/js/CodeMirror/mode/htmlmixed.js"></script>
<script src="http://w2ui.com/web/js/CodeMirror/mode/css.js"></script>
<script src="http://w2ui.com/web/js/CodeMirror/mode/xml.js"></script>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-fields-1.0.min.css" />
<script type="text/javascript" src="http://w2ui.com/src/w2ui-fields-1.0.min.js"></script>
<script src="http://w2ui.com/web/pages/code-mirror.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://w2ui.com/web/js/font-awesome/font-awesome.css" />
<style>
/* Begin HTML5 United States of America Currency Format Inputs */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
/* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;}
#content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;}
.w2ui-label {float:left; margin-top:6px; margin-bottom:3px; width:100px; padding:0px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right; min-height:20px;}
.w2ui-field {margin-bottom:3px; margin-left:108px; padding:3px; min-height:20px;}
span.legend {padding-left:20px; color:#888;}
</style>
</head>
<body>
<div id="content">
<b>United States of America Currency Format</b>
<div style="height: 5px; clear: both"></div>
<div class="w2ui-label"> Integer: </div>
<div class="w2ui-field"> <input id="us-int" style="text-align: right; width: 150px" value="0"> </div>
<div class="w2ui-label"> Float: </div>
<div class="w2ui-field"> <input id="us-float" style="text-align: right; width: 150px" value="0"> </div>
<div class="w2ui-label"> Money: </div>
<div class="w2ui-field"> <input id="us-money" style="text-align: right; width: 150px" value="0"> </div>
<div class="w2ui-label"> Percent: </div>
<div class="w2ui-field"> <input id="us-percent" style="text-align: right; width: 150px" value="0"> </div>
<div style="height: 20px; clear: both"></div>
<script>
$(function () {
$('#w2int').w2field('int', { autoFormat: false });
$('#w2float').w2field('float', { autoFormat: false });
$('#w2hex').w2field('hex');
$('#w2color').w2field('color');
$('#us-int').w2field('int');
$('#us-float').w2field('float', { precision: 3 });
$('#us-money').w2field('money', { moneySymbol: '$' });
$('#us-percent').w2field('percent', { precision: 1, min: 0, max: 100 });
});
</script>
<br /><br />
<div id="code">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_164.html">HTML5 United States of America Currency Format Inputs Code Snippet</a> page. ]
</div>
</div>
</body>
</html>
|