| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | # [Bootstrap MaxLength](http://mimo84.github.com/bootstrap-maxlength/) |
| A | 2 | |
| 3 | ||
| 4 | This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. | |
| 5 | This plugin uses the HTML5 attribute "maxlength" to work. | |
| 6 | ||
| 7 | ||
| 8 | The indicator badge show up on focusing on the element, and disappear when the focus is lost. | |
| 9 | ||
| 10 | ## Configurable options | |
| 11 | ||
| 12 | * **alwaysShow**: if true the threshold will be ignored and the remaining length indication will be always showing up while typing or on focus on the input. Default: false. | |
| 13 | * **threshold**: this is a number indicating how many chars are left to start displaying the indications. Default: 10. | |
| 14 | * **warningClass**: it's the class of the element with the indicator. By default is the bootstrap "badge badge-info" but can be changed to anything you'd like. | |
| 15 | * **limitReachedClass**: it's the class the element gets when the limit is reached. Default is "badge badge-warning". | |
| 16 | * **separator**: represents the separator between the number of typed chars and total number of available chars. Default is "/". | |
| 17 | * **preText**: is a string of text that can be outputted in front of the indicator. preText is empty by default. | |
| 18 | * **postText**: is a string outputted after the indicator. postText is empty by default. | |
| 19 | * **showMaxLength**: if false, will display just the remaining length, e.g. will not display the max length. Default: true. | |
| 20 | * **placement**: is a string, define where to output the counter. Possible values are: **bottom** ( *default option* ), **left**, **top**, **right**, **bottom-right**, **top-right**, **top-left**, **bottom-left** and **centered-right**. | |
| 21 | * **message**: an alternative way to provide the message text, i.e. 'You have typed %charsTyped% chars, %charsRemaining% of %charsTotal% remaining'. %charsTyped%, %charsRemaining% and %charsTotal% will be replaced by the actual values. This overrides the options separator, preText, postText and showMaxLength. | |
| 22 | * **uft8**: if true the input will count using uft8 bytesize/encoding. For example: the '£' character is counted as two characters. | |
| 23 | ||
| 24 | ## Examples | |
| 25 | ||
| 26 | Basic implementation: | |
| 27 | ||
| 28 | $('input[maxlength]').maxlength(); | |
| 29 | ||
| 30 | Change the threshold value: | |
| 31 | ||
| 32 | $('input.className').maxlength({ | |
| 33 | threshold: 20 | |
| 34 | }); | |
| 35 | ||
| 36 | An example will all the configurable options: | |
| 37 | ||
| 38 | $('input.className').maxlength({ | |
| 39 | alwaysShow: true, | |
| 40 | threshold: 10, | |
| 41 | warningClass: "label label-info", | |
| 42 | limitReachedClass: "label label-warning", | |
| 43 | placement: 'top', | |
| 44 | preText: 'used ', | |
| 45 | separator: ' of ', | |
| 46 | postText: ' chars.' | |
| 47 | }); | |
| 48 | ||
| 49 | The same example using the message option: | |
| 50 | ||
| 51 | $('input.className').maxlength({ | |
| 52 | alwaysShow: true, | |
| 53 | threshold: 10, | |
| 54 | warningClass: "label label-info", | |
| 55 | limitReachedClass: "label label-warning", | |
| 56 | placement: 'top', | |
| 57 | message: 'used %charsTyped% of %charsTotal% chars.' | |
| 58 | }); | |
| 59 | ||
| 60 | ## Changelog | |
| 61 | ||
| 62 | ### 1.4.2 | |
| 63 | ||
| 64 | * Fixed issue with counting when the user moves with shift+tab keyboard shortcut. | |
| 65 | * Replaced the warningClass limitReachedClass options to use labels rather than badges for Bootstrap 3.0 better compatibility. | |
| 66 | ||
| 67 | ### 1.4.1 | |
| 68 | ||
| 69 | * Added support for TAB key when the maxlength is reached. | |
