jquery.autosize.input.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. var Plugins;
  2. (function (Plugins) {
  3. var AutosizeInputOptions = (function () {
  4. function AutosizeInputOptions(space) {
  5. if (typeof space === "undefined") { space = 30; }
  6. this.space = space;
  7. }
  8. return AutosizeInputOptions;
  9. })();
  10. Plugins.AutosizeInputOptions = AutosizeInputOptions;
  11. var AutosizeInput = (function () {
  12. function AutosizeInput(input, options) {
  13. var _this = this;
  14. this._input = $(input);
  15. this._options = $.extend({}, AutosizeInput.getDefaultOptions(), options);
  16. // Init mirror
  17. this._mirror = $('<span style="position:absolute; top:-999px; left:0; white-space:pre;"/>');
  18. // Copy to mirror
  19. $.each(['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'letterSpacing', 'textTransform', 'wordSpacing', 'textIndent'], function (i, val) {
  20. _this._mirror[0].style[val] = _this._input.css(val);
  21. });
  22. $("body").append(this._mirror);
  23. // Bind events - change update paste click mousedown mouseup focus blur
  24. // IE 9 need keydown to keep updating while deleting (keeping backspace in - else it will first update when backspace is released)
  25. // IE 9 need keyup incase text is selected and backspace/deleted is hit - keydown is to early
  26. // How to fix problem with hitting the delete "X" in the box - but not updating!? mouseup is apparently to early
  27. // Could bind separatly and set timer
  28. // Add so it automatically updates if value of input is changed http://stackoverflow.com/a/1848414/58524
  29. this._input.on("keydown keyup input propertychange change", function (e) {
  30. _this.update();
  31. });
  32. // Update
  33. (function () {
  34. _this.update();
  35. })();
  36. }
  37. AutosizeInput.prototype.getOptions = function () {
  38. return this._options;
  39. };
  40. AutosizeInput.prototype.update = function () {
  41. var value = this._input.val() || "";
  42. if (value === this._mirror.text()) {
  43. // Nothing have changed - skip
  44. return;
  45. }
  46. // Update mirror
  47. this._mirror.text(value);
  48. // Calculate the width
  49. var newWidth = this._mirror.width() + this._options.space;
  50. // Update the width
  51. this._input.width(newWidth);
  52. };
  53. AutosizeInput.getDefaultOptions = function () {
  54. return this._defaultOptions;
  55. };
  56. AutosizeInput.getInstanceKey = function () {
  57. // Use camelcase because .data()['autosize-input-instance'] will not work
  58. return "autosizeInputInstance";
  59. };
  60. AutosizeInput._defaultOptions = new AutosizeInputOptions();
  61. return AutosizeInput;
  62. })();
  63. Plugins.AutosizeInput = AutosizeInput;
  64. // jQuery Plugin
  65. (function ($) {
  66. var pluginDataAttributeName = "autosize-input";
  67. var validTypes = ["text", "password", "search", "url", "tel", "email", "number"];
  68. // jQuery Plugin
  69. $.fn.autosizeInput = function (options) {
  70. return this.each(function () {
  71. // Make sure it is only applied to input elements of valid type
  72. // Or let it be the responsibility of the programmer to only select and apply to valid elements?
  73. if (!(this.tagName == "INPUT" && $.inArray(this.type, validTypes) > -1)) {
  74. // Skip - if not input and of valid type
  75. return;
  76. }
  77. var $this = $(this);
  78. if (!$this.data(Plugins.AutosizeInput.getInstanceKey())) {
  79. // If instance not already created and attached
  80. if (options == undefined) {
  81. // Try get options from attribute
  82. options = $this.data(pluginDataAttributeName);
  83. }
  84. // Create and attach instance
  85. $this.data(Plugins.AutosizeInput.getInstanceKey(), new Plugins.AutosizeInput(this, options));
  86. }
  87. });
  88. };
  89. // On Document Ready
  90. $(function () {
  91. // Instantiate for all with data-provide=autosize-input attribute
  92. $("input[data-" + pluginDataAttributeName + "]").autosizeInput();
  93. });
  94. // Alternative to use On Document Ready and creating the instance immediately
  95. //$(document).on('focus.autosize-input', 'input[data-autosize-input]', function (e)
  96. //{
  97. // $(this).autosizeInput();
  98. //});
  99. })(jQuery);
  100. })(Plugins || (Plugins = {}));