Skip to main content

Only allow input number value with autoNumeric.js


autoNumeric is a jQuery plugin that automatically formats currency and numbers as you type on form inputs. I used autoNumeric 1.9.21 for demo code.

1. Dowload autoNumeric.js file from https://github.com/BobKnothe/autoNumeric
2. Import to project
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script type="text/javascript" src="js/autoNumeric.js"></script>
3. Define a function to use it
 
<script type="text/javascript">
 /* only number is accepted */
 function txtNumberOnly_Mask() {
  var inputOrgNumber = $("#numberTxt");
  inputOrgNumber.each(function() {
   $(this).autoNumeric({
    aSep : '',  
    aDec: '.', 
    vMin : '0.00'
   });
  });
 }
</script>

4. Call the function by event
 
<form>

<input type="text" value="" id="numberTxt"/>(only number)

</form>

<script type="text/javascript">

 $(document).ready(function (){

   txtNumberOnly_Mask();

 });

</script>

Comments

Popular posts from this blog

Creating a Chatbot with RiveScript in Java

Motivation "Artificial Intelligence (AI) is considered a major innovation that could disrupt many things. Some people even compare it to the Internet. A large investor firm predicted that some AI startups could become the next Apple, Google or Amazon within five years"   - Prof. John Vu, Carnegie Mellon University. Using chatbots to support our daily tasks is super useful and interesting. In fact, "Jenkins CI, Jira Cloud, and Bitbucket" have been becoming must-have apps in Slack of my team these days. There are some existing approaches for chatbots including pattern matching, algorithms, and neutral networks. RiveScript is a scripting language using "pattern matching" as a simple and powerful approach for building up a Chabot. Architecture Actually, it was flexible to choose a programming language for the used Rivescript interpreter like Java, Go, Javascript, Python, and Perl. I went with Java. Used Technologies and Tools Oracle JDK 1.8...

[Snippet] CSS - Child element overlap parent

I searched from somewhere and found that a lot of people says a basic concept for implementing this feature looks like below: HTML code: <div id="parent">  <div id="child">  </div> </div> And, CSS: #parent{   position: relative;   overflow:hidden; } #child{   position: absolute;   top: -1;   right: -1px; } However, I had a lot of grand-parents in my case and the above code didn't work. Therefore, I needed an alternative. I presumed that my app uses Boostrap and AngularJs, maybe some CSS from them affects mine. I didn't know exactly the problem, but I believed when all CSS is loaded into my browser, I could completely handle it. www.tom-collinson.com I tried to create an example to investigated this problem by Fiddle . Accidentally, I just changed: position: parent; to position: static; for one of parents -> the problem is solved. Look at my code: <div class="modal-body dn-placeholder-parent-positi...

Today I Learned - Git at First Glance

Getting Started It's always fun to jump right in to the "HelloWorld" app. Just go for it! Visit: https://try.github.io/levels/1/challenges/1 Cheatsheet It's time for us to store our "magic tools". Visit:  https://www.git-tower.com/blog/git-cheat-sheet Which collaboration way fit your team? Git is just a tool which doesn't teach you how to work properly in a team. It depends on your projects and you need to choose your own team workflow. Visit: https://www.atlassian.com/git/tutorials/comparing-workflows

Selenium - Override javascript functions to ignore downloading process

I have got an issue with downloading process on IE 8. This browser blocks my automatic-download functionality on my app so that I could not work with my test case any more after that. In my case, I didn't care about the file is downloaded or not, I just focus on the result after downloading process finished successfully. Therefore, I found a solution to ignore this process so that I can work normally. I use Primefaces, here is the remote command to trigger the download process <p:remoteCommand name="cmdGenerateDocument" actionListener="#{logic.onGenerateDocument}" update="xrflDocumentCreationPanel" oncomplete="clickDownloadButton();"/> The following is my test case: @Test public void shouldUpdateStep6ToWarningIfStep1IsValidAfterFinished(){ MainPage mainPage = new MainPage(); waitForLoading(mainPage.getDriver()); EmployeeDetailPage empDetailPage = new EmployeeDetailPage(); waitForLoading(empDetailPage.getDriver()); e...