jQuery implementiert ein Betragseingabefeld-js-Tutorial-php.cn

jQuery implementiert ein Betragseingabefeld

高洛峰

Freigeben： 2016-12-28 09:51:22

Original

1577 Leute haben es durchsucht

Während des Frontend-Entwicklungsprozesses werden normalerweise numerische Eingabefelder verwendet. Beispielsweise ist die Eingabe eines Betrags erforderlich, und es ist verboten, nicht numerische Zeichen einzugeben oder nicht numerische Zeichen einzufügen ?

Erster Durchgang (function($){ })(jQuery); um die Funktion zur Modulisolierung sofort auszuführen, wodurch Probleme mit der Variablenverschmutzung durch andere Funktionsmodule und Plug-Ins vermieden werden können An der Spitze der sofortigen Ausführungsfunktion platziert.

Erweitern Sie dann die Numbox-Methode auf dem JQuery-Prototyp und geben Sie den Code direkt ein

(function ($) {
 // 数值输入框
 $.fn.numbox = function (options) {
 var type = (typeof options);
 if (type == &#39;object&#39;) {
　　　　　　　// 创建numbox对象
  if (options.width) this.width(options.width);
  if (options.height) this.height(options.height);
  this.bind("input propertychange", function (obj) {
  numbox_propertychange(obj.target);
  });
  this.bind("change", function (obj) {
  var onChange = options.onChange;
  if (!onChange) return;
  var numValue = Number(obj.target.value);
  onChange(numValue);
  });
  this.bind("hide", function (obj) {
  var onHide = options.onHide;
  if (!onHide) return;
  var numValue = Number(obj.target.value);
  onHide(numValue);
  });
  return this;
 }
 else if (type == &#39;string&#39;) {
　　　　　　　// type为字符串类型，代表调用numbox对象中的方法
  var method = eval(options);
  if (method) return method(this, arguments);
 }
 }
 // 属性值变化事件
 function numbox_propertychange(numbox) {
 if (numbox.value == &#39;-&#39; || numbox.value == numbox.oldvalue) return;
 var numvalue = Number(numbox.value);
 if (isNaN(numvalue)) {
  numbox.value = numbox.oldvalue;
 }
 else {
  numbox.oldvalue = numbox.value;
 }
 }
 // 获取值
 function getValue(numbox) {
 var value = numbox.val();
 return Number(value);
 }
 // 设置值
 function setValue(numbox, params) {
 if (params[1] == undefined) return;
 var numvalue = Number(params[1]);
 if (!isNaN(numvalue)) {
  for (var i = 0; i < numbox.length; i++) {
  numbox[i].focus();
  numbox[i].value = numvalue;
  numbox[i].oldvalue = numvalue;
  }
 }
 }
})(jQuery); // 这里传入jQuery对象作为参数，是为了避免在模块内部直接去访问全局对象，避免过度依赖其他模块，降低耦合度，更加规范化，可控性更高，可参考其他成熟jQuery插件（easyui、bootstrap）

Nach dem Login kopieren

Die Aufrufmethode lautet wie folgt

<body>
 <input id="test" />
 <script>
 $("#test").numbox({
  width: 150,
  height: 20
 });
 </script>
</body>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen oder Arbeiten helfen kann, und ich hoffe auch, die chinesische PHP-Website zu unterstützen!

Weitere Artikel zur jQuery-Implementierung des Betragseingabefelds finden Sie auf der chinesischen PHP-Website!