Changeset 12706


Ignore:
Timestamp:
Aug 21, 2011, 5:54:02 AM (10 years ago)
Author:
jordan
Message:

(trunk web) use jQuery to limit the preference dialog's numberic entry fields to only accept numbers. (the HOWTO for this was at http://www.west-wind.com/weblog/posts/2011/Apr/22/Restricting-Input-in-HTML-Textboxes-to-Numeric-Values)

Location:
trunk/web
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/web/index.html

    r12705 r12706  
    258258                                                                <div class="formdiv">
    259259                                                                        <label for="refresh_rate" class="item">Refresh Rate:</label>
    260                                                                         <input type="text" name="refresh_rate" id="refresh_rate"/>
     260                                                                        <input type="text" name="refresh_rate" id="refresh_rate" class="numberinput"/>
    261261                                                                        <label class="suffix">seconds</label>
    262262                                                                </div>
     
    270270                                                                        <input type="checkbox" name="limit_download" id="limit_download"/>
    271271                                                                        <label for="limit_download" class="item">Download Rate:</label>
    272                                                                         <input type="text" name="download_rate" id="download_rate"/>
     272                                                                        <input type="text" name="download_rate" id="download_rate" class="numberinput"/>
    273273                                                                        <label class="suffix">kB/s</label>
    274274                                                                </div>
     
    276276                                                                        <input type="checkbox" name="limit_upload" id="limit_upload"/>
    277277                                                                        <label for="limit_upload" class="item">Upload Rate:</label>
    278                                                                         <input type="text" name="upload_rate" id="upload_rate"/>
     278                                                                        <input type="text" name="upload_rate" id="upload_rate" class="numberinput"/>
    279279                                                                        <label class="suffix">kB/s</label>
    280280                                                                </div>
     
    285285                                                                <div class="formdiv">
    286286                                                                        <label for="turtle_download_rate" class="item">Download Rate:</label>
    287                                                                         <input type="text" name="turtle_download_rate" id="turtle_download_rate"/>
     287                                                                        <input type="text" name="turtle_download_rate" id="turtle_download_rate" class="numberinput"/>
    288288                                                                        <label class="suffix">kB/s</label>
    289289                                                                </div>
    290290                                                                <div class="formdiv">
    291291                                                                        <label for="turtle_upload_rate" class="item">Upload Rate:</label>
    292                                                                         <input type="text" name="turtle_upload_rate" id="turtle_upload_rate"/>
     292                                                                        <input type="text" name="turtle_upload_rate" id="turtle_upload_rate" class="numberinput"/>
    293293                                                                        <label class="suffix">kB/s</label>
    294294                                                                </div>
     
    324324                                                                <div class="formdiv">
    325325                                                                        <label for="conn_global" class="item">Global maximum connections:</label>
    326                                                                         <input type="text" name="conn_global" id="conn_global"/>
     326                                                                        <input type="text" name="conn_global" id="conn_global" class="numberinput"/>
    327327                                                                        <label class="suffix">peers</label>
    328328                                                                </div>
    329329                                                                <div class="formdiv">
    330330                                                                        <label for="conn_torrent" class="item">Maximum connections for new transfers:</label>
    331                                                                         <input type="text" name="conn_torrent" id="conn_torrent"/>
     331                                                                        <input type="text" name="conn_torrent" id="conn_torrent" class="numberinput"/>
    332332                                                                        <label class="suffix">peers</label>
    333333                                                                </div>
     
    374374                                                                <div class="formdiv">
    375375                                                                        <label for="port" class="item">Incoming TCP Port:</label>
    376                                                                         <input type="text" id="port" name="port"/>
     376                                                                        <input type="text" id="port" name="port" class="numberinput"/>
    377377                                                                        <label class="suffix" id="port_test"></label>
    378378                                                                </div>
  • trunk/web/javascript/common.js

    r12690 r12706  
    310310        return o;
    311311};
     312
     313
     314// forceNumeric() plug-in implementation
     315jQuery.fn.forceNumeric = function () {
     316        return this.each(function () {
     317                $(this).keydown(function (e) {
     318                        var key = e.which || e.keyCode;
     319                        return !e.shiftKey && !e.altKey && !e.ctrlKey &&
     320                                // numbers   
     321                                key >= 48 && key <= 57 ||
     322                                // Numeric keypad
     323                                key >= 96 && key <= 105 ||
     324                                // comma, period and minus, . on keypad
     325                                key == 190 || key == 188 || key == 109 || key == 110 ||
     326                                // Backspace and Tab and Enter
     327                                key == 8 || key == 9 || key == 13 ||
     328                                // Home and End
     329                                key == 35 || key == 36 ||
     330                                // left and right arrows
     331                                key == 37 || key == 39 ||
     332                                // Del and Ins
     333                                key == 46 || key == 45;
     334                });
     335        });
     336}
  • trunk/web/javascript/transmission.js

    r12704 r12706  
    3636                // Set up user events
    3737                var tr = this;
     38                $(".numberinput").forceNumeric();
    3839                $('#pause_all_link').bind('click', function(e){ tr.stopAllClicked(e); });
    3940                $('#resume_all_link').bind('click', function(e){ tr.startAllClicked(e); });
     
    130131                this._inspector._info_tab.upload_to = $(ti+'upload_to')[0];
    131132
    132                 // Setup the preference box
    133                 this.setupPrefConstraints();
    134 
    135133                // Setup the prefs gui
    136134                this.initializeSettings( );
     
    206204        },
    207205
    208         /*
    209          * Set up the preference validation
    210          */
    211         setupPrefConstraints: function() {
    212                 // only allow integers for speed limit & port options
    213                 $('div.preference input[@type=text]:not(#download_location,#block_url)').blur( function() {
    214                         this.value = this.value.replace(/[^0-9]/gi, '');
    215                         if (this.value == '') {
    216                                 if ($(this).is('#refresh_rate')) {
    217                                         this.value = 5;
    218                                 } else {
    219                                         this.value = 0;
    220                                 }
    221                         }
    222                 });
    223         },
    224 
    225206        setCompactMode: function( is_compact )
    226207        {
     
    12581239                                        args[RPC._DownSpeedLimited] = false;
    12591240                                } else {
    1260                                         var rate_str = ($element[0].innerHTML).replace(/[^0-9]/ig, '');
     1241                                        var rate_str = $element[0].innerHTML
    12611242                                        var rate_val = parseInt( rate_str );
    12621243                                        setInnerHTML( $('#limited_download_rate')[0], [ 'Limit (', Transmission.fmt.speed(rate_val), ')' ].join('') );
     
    12771258                                        args[RPC._UpSpeedLimited] = false;
    12781259                                } else {
    1279                                         var rate_str = ($element[0].innerHTML).replace(/[^0-9]/ig, '');
     1260                                        var rate_str = $element[0].innerHTML
    12801261                                        var rate_val = parseInt( rate_str );
    12811262                                        setInnerHTML( $('#limited_upload_rate')[0], [ 'Limit (', Transmission.fmt.speed(rate_val), ')' ].join('')  );
Note: See TracChangeset for help on using the changeset viewer.