Problem with UI spinner decimal places and event

Problem with UI spinner decimal places and event

I'm using a numeric Jquery UI spinner on a text input.

I need the spinner step to be 0.1, but the value to be rounded to 2 decimal places, not 1. If a value like 1.55 is input into the spinner, the value should be set to 1.65 when spun up, not 1.7 like it normally does.

It looks like this is not supported, but I can't find an applicable workaround. I tried a way below, but it doesn't work and also gives an error, 'member not found'.

Also, I need to have an onblur event on the input field, but this should only run when you click in and out of the text box, I can't find a way to make it not run when the spinner buttons are pressed.


  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="utf-8">
  6.   <title>jQuery UI Spinner - Decimal</title>
  7.   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  8.   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  9.   <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  10.   <link rel="stylesheet" href="/resources/demos/style.css">
  11.   <script>
  12.   $(function() {
  13.   
  14.     $( "#TextBox" ).spinner({
  15.       step: 0.10,
  16.  min: 0.0,
  17.       numberFormat: "n",
  18.  incremental: false, 
  19.   
  20.  spin: function( event, ui ) {
  21. if (ui.value > $(this).spinner( "value")) {
  22. if (ui.value != $(this).spinner( "value") + 0.10) {
  23. event.preventDefault();
  24. $(this).spinner( "value" , $(this).spinner( "value") + 0.10);
  25. }
  26. }
  27.  }

  29.     });
  31.   });
  32.   
  33.   function runOnBlur( ){
  34. //
  35.   }
  36.   </script>
  37. </head>
  38. <body>
  39.  
  40. <input type="text" id="TextBox" onblur = "runOnBlur()" />
  41.  
  42. </body>
  43. </html>



    • Topic Participants

    • vv411