Jquery Number to Word alert

Hi guys, today I’m going to demonstrate jquery alert box. Recently I was received a project by manager and that is invoicing and payment system and i pointed out sometimes I also bit difficultly to entering the prices. , Because sometime I enter values incoreclty.to avoid the same issue to users, I decided to build the alert box to display the value in the text box.

 easy configuration , just need to add the  class="WordToNum" to textbox

Entire code snippt:
<style type="text/css">
        #xx a IMG
        {
            display: none;
        }
     
        #PageDiv
        {
        }
        .bubble
        {
            background-color: #F2F2F2;
            border-radius: 5px;
            box-shadow: 0 0 6px #B2B2B2;
            display: inline-block;
            padding: 10px;
            position: relative;
            vertical-align: top;
            background: #e14f1c url(images/ui-bg_gloss-wave_45_e14f1c_500x100.png) 50% top repeat-x;
        }
     
        .bubble::before
        {
            background: #e14f1c url(images/ui-bg_gloss-wave_45_e14f1c_500x100.png) 50% top repeat-x;
            content: "\00a0";
            display: block;
            position: absolute;
            transform: rotate( 29deg ) skew( -35deg );
            -moz-transform: rotate( 29deg ) skew( -35deg );
            -ms-transform: rotate( 29deg ) skew( -35deg );
            -o-transform: rotate( 29deg ) skew( -35deg );
            -webkit-transform: rotate( 29deg ) skew( -35deg );
            width: 20px;
        }
     
        .me
        {
            float: left;
            background: #e14f1c url(images/ui-bg_gloss-wave_45_e14f1c_500x100.png) 50% top repeat-x;
        }
     
        .me::before
        {
            background: #e14f1c url(images/ui-bg_gloss-wave_45_e14f1c_500x100.png) 50% top repeat-x;
            left: -10px;
            top: 2px;
        }
    </style>

 <script src="https://code.jquery.com/jquery-git1.min.js"></script>
<script type="text/javascript">
var th = ['', 'thousand', 'million', 'billion', 'trillion'];
// uncomment this line for English Number System
// var th = ['','thousand','million', 'milliard','billion'];

var dg = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine']; var tn = ['ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen']; var tw = ['twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety']; function toWords(s) { s = s.toString(); s = s.replace(/[\, ]/g, ''); if (s != parseFloat(s)) return 'not a number'; var x = s.indexOf('.'); if (x == -1) x = s.length; if (x > 15) return 'too big'; var n = s.split(''); var str = ''; var sk = 0; for (var i = 0; i < x; i++) { if ((x - i) % 3 == 2) { if (n[i] == '1') { str += tn[Number(n[i + 1])] + ' '; i++; sk = 1; } else if (n[i] != 0) { str += tw[n[i] - 2] + ' '; sk = 1; } } else if (n[i] != 0) { str += dg[n[i]] + ' '; if ((x - i) % 3 == 0) str += 'hundred '; sk = 1; } if ((x - i) % 3 == 1) { if (sk) str += th[(x - i - 1) / 3] + ' '; sk = 0; } } if (x != s.length) { var y = s.length; str += 'point '; for (var i = x + 1; i < y; i++) str += dg[n[i]] + ' '; } return str.replace(/\s+/g, ' '); }

</script>

<script type="text/javascript">
$(document).ready(function(evt) {




                $('.WordToNum').on('keyup', function (evst) {
                 
                 //if ($(this).val().length == 0) return;
 var words = toWords($(this).val());
                    //if (words.length == 0) return;
                    //alert($(this).attr("id"));
                    JqueryAlertJS(words, $(this).attr("id"));
                 
                });


                 $('#ff').click(function(eeee) {
alert('xx');
                   // $('#ff').remove();
                });

         
$( ".WordToNum" )
  .focusout(function() {
      $('#ff').remove();
  })
   .focus(function() {

var words = toWords($(this).val());

     JqueryAlertJS(words , $(this).attr("id"));
  })

});

        function JqueryAlertJS(message, id) {
            $('#ff').remove();

            var position = $('#' + id).position();
            var top = position.top;
            var l = position.left + $('#' + id).width() + 20;
            // alert(l);
div = $("<div id='ff' class='ui-corner-all bubble me towords'   style='color:white;z-index:500500;                                    background-color:#e14f1c;position:absolute;top:" + position.top + "px;left:" + l + "px;'>").html(message);
            //$("#numm").prepend(div);
 $( "#numm" ).append(div );

            return false;

        }

</script>

<br />
<div id="numm"></div>
<input class="WordToNum" id="MainContent_TextBox1" name="ctl00MainContentTextBox1" type="text" />