111 lines
6.0 KiB
HTML
111 lines
6.0 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
|
|
<script src="../src/jquery.maskMoney.js" type="text/javascript"></script>
|
|
|
|
<!-- just necessary for syntax highlight -->
|
|
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css' />
|
|
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css' />
|
|
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
|
|
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
|
|
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
|
|
<style type="text/css">
|
|
body { font-family: helvetica, sans-serif; }
|
|
h1 { font-size: 2em;}
|
|
h4 {font-weight: 100; }
|
|
h4 code { background-color: whitesmoke; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>jQuery-maskMoney examples</h1>
|
|
|
|
<p>jQuery plugin to mask data entry in the input text in the form of money (currency). <a href="https://github.com/plentz/jquery-maskmoney">Project home @ github</a></p>
|
|
<input type="text" id="demo1" value="0.01" />
|
|
<script type="text/javascript">$("#demo1").maskMoney();</script>
|
|
<pre class="brush: js">$("#demo1").maskMoney();</pre>
|
|
|
|
<input type="text" id="demo2" />
|
|
<script type="text/javascript">$("#demo2").maskMoney({thousands:',', decimal:'.', allowZero: true, suffix: ' €'});</script>
|
|
<pre class="brush: js">$("#demo2").maskMoney({thousands:'', decimal:'.', allowZero:true, suffix: ' €'});</pre>
|
|
|
|
<input type="text" id="demo3" />
|
|
<script type="text/javascript">$("#demo3").maskMoney({prefix:'R$ ', allowNegative: true, thousands:'.', decimal:',', affixesStay: false});</script>
|
|
<pre class="brush: js">$("#demo3").maskMoney({prefix:'R$ ', allowNegative: true, thousands:'.', decimal:',', affixesStay: false});</pre>
|
|
|
|
<input type="text" id="demo4" data-thousands="." data-decimal="," data-prefix="R$ " />
|
|
<script type="text/javascript">$("#demo4").maskMoney();</script>
|
|
<pre class="brush: js">$("#demo4").maskMoney();</pre>
|
|
<pre class="brush: html"><input type="text" id="demo4" data-thousands="." data-decimal="," data-prefix="R$ " /></pre>
|
|
|
|
<input type="text" id="demo5" value="1234567.89"/>
|
|
<script type="text/javascript">$("#demo5").maskMoney({prefix:'R$ ', thousands:'.', decimal:',', affixesStay: true});</script>
|
|
<input type="button" onclick="$('#demo5').maskMoney('mask')" value="trigger mask event at demo5"/>
|
|
<pre class="brush: js">$("#demo5").maskMoney('mask');</pre>
|
|
|
|
<input type="text" id="demo6"/>
|
|
<script type="text/javascript">$("#demo6").maskMoney({prefix:'R$ ', thousands:'.', decimal:',', affixesStay: true});</script>
|
|
<input type="button" onclick="$('#demo6').maskMoney('mask', 1999.99)" value="trigger mask event at demo6, passing a float value as parameter"/>
|
|
<pre class="brush: js">$("#demo6").maskMoney('mask', 1999.99);</pre>
|
|
|
|
<input type="text" id="demo7"/>
|
|
<script type="text/javascript">$("#demo7").maskMoney();</script>
|
|
<input type="button" onclick="$('#demo7').maskMoney('destroy')" value="remove maskmoney from demo7"/>
|
|
<pre class="brush: js">$("#demo6").maskMoney('destroy');</pre>
|
|
|
|
<input type="text" id="demo8" value="R$ 1.231.231,23"/>
|
|
<script type="text/javascript">$("#demo8").maskMoney();</script>
|
|
<input type="button" onclick="var num = $('#demo8').maskMoney('unmasked')[0];alert('type: '+typeof(num) + ', value: ' + num)" value="alert unmasked value and type from demo7"/>
|
|
<pre class="brush: js">
|
|
var num = $('#demo8').maskMoney('unmasked')[0];
|
|
alert('type: '+ typeof(num) + ', value: ' + num)
|
|
</pre>
|
|
|
|
<input type="text" id="demo9" value="$15.45" />
|
|
<script type="text/javascript">
|
|
$("#demo9").maskMoney({ formatOnBlur: true, prefix: '$' });
|
|
</script>
|
|
<pre class="brush: js">$("#demo9").maskMoney({ formatOnBlur: true, prefix: '$' });</pre>
|
|
|
|
<input type="text" id="demo10" value="$15.45" />
|
|
<script type="text/javascript">
|
|
$("#demo10").maskMoney({ formatOnBlur: true, reverse: true, prefix: '$' });
|
|
</script>
|
|
<h4>Note: The <code>reverse</code> option is meant to be used with the <code>formatOnBlur</code> option.</h4>
|
|
<pre class="brush: js">
|
|
$("#demo10").maskMoney({ formatOnBlur: true, reverse: true, prefix: '$' });
|
|
</pre>
|
|
|
|
<input type="text" id="demo11" value="45.55" />
|
|
<script type="text/javascript">
|
|
$("#demo11").maskMoney({ selectAllOnFocus: true });
|
|
</script>
|
|
<pre class="brush: js">$("#demo11").maskMoney({ selectAllOnFocus: true });</pre>
|
|
|
|
<input type="text" id="demo12" value=""/>
|
|
<script type="text/javascript">$("#demo12").maskMoney({ formatOnBlur: true, reverse: true, prefix: '$', selectAllOnFocus: true });</script>
|
|
<input type="button" onclick="var num = $('#demo12').maskMoney('applyMask', $('#demo12').val());alert('Mask applied '+ num)" value="alert masked value from demo12"/>
|
|
<pre class="brush: js">
|
|
$("#demo12").maskMoney({ formatOnBlur: true, reverse: true, prefix: '$', selectAllOnFocus: true });
|
|
var num = $('#demo12').maskMoney('applyMask', $('#demo12').val());
|
|
alert('Mask applied '+ num);
|
|
</pre>
|
|
|
|
<input type="text" id="demo13" value="45" />
|
|
<script type="text/javascript">
|
|
$("#demo13").maskMoney({ formatOnBlur: true, reverse: true, prefix: '$', selectAllOnFocus: true, precision: 0 });
|
|
</script>
|
|
<pre class="brush: js">$("#demo13").maskMoney({ formatOnBlur: true, reverse: true, prefix: '$', selectAllOnFocus: true, precision: 0 });</pre>
|
|
|
|
<input type="text" id="demo14" value="" />
|
|
<script type="text/javascript">
|
|
$("#demo14").maskMoney({ formatOnBlur: true, reverse: true, prefix: '$', selectAllOnFocus: true, precision: 4, allowEmpty: true });
|
|
</script>
|
|
<pre class="brush: js">$("#demo14").maskMoney({ formatOnBlur: true, reverse: true, prefix: '$', selectAllOnFocus: true, precision: 4, allowEmpty: true });</pre>
|
|
|
|
</body>
|
|
<script type="text/javascript">
|
|
SyntaxHighlighter.all()
|
|
</script>
|
|
</html>
|