suchen

Heim >Web-Frontend >js-Tutorial >jQuery implementiert ein Betragseingabefeld

jQuery implementiert ein Betragseingabefeld

高洛峰
高洛峰Original
2016-12-28 09:51:221563Durchsuche

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 == 'object') {
　　　　　　　// 创建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 == 'string') {
　　　　　　　// type为字符串类型，代表调用numbox对象中的方法
  var method = eval(options);
  if (method) return method(this, arguments);
 }
 }
 // 属性值变化事件
 function numbox_propertychange(numbox) {
 if (numbox.value == '-' || 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）

Die Aufrufmethode lautet wie folgt 

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

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript-Array-Methode analysieren und reduzierenNächster Artikel：JavaScript-Array-Methode analysieren und reduzieren

In Verbindung stehende Artikel

Mehr sehen