jQueryは金額入力ボックスを実装します-jsチュートリアル-php.cn

jQueryは金額入力ボックスを実装します

高洛峰

リリース： 2016-12-28 09:51:22

オリジナル

1577 人が閲覧しました

フロントエンドの開発プロセスでは、通常、数値入力ボックスが使用されます。たとえば、金額を入力する必要がある場合、数字以外の文字の入力は禁止され、数字以外の文字の貼り付けも禁止されます。これを実装するにはどうすればよいでしょうか?

最初のパス (function($){ })(jQuery); 即時実行関数は、他の機能モジュールやプラグインとの変数汚染の問題を回避するために使用されます。即時実行関数の先頭。

その後、jqueryプロトタイプ上でnumboxメソッドを拡張し、直接コードを入力します

(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）

ログイン後にコピー

呼び出し方法は以下の通りです

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

ログイン後にコピー

以上がこの記事の内容の全てですこの記事の内容が少しでもお役に立てれば幸いです。皆様の勉強やお仕事にもぜひPHP中国語サイトをよろしくお願いいたします！

金額入力ボックスの jQuery 実装に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。