집 > 기사 > 웹 프론트엔드 > jQuery는 금액 입력 상자를 구현합니다.

jQuery는 금액 입력 상자를 구현합니다.

高洛峰원래의: 2016-12-28 09:51:221514검색

프런트엔드 개발 과정에서는 일반적으로 숫자 입력란을 사용하는데, 예를 들어 금액을 입력해야 하는데, 숫자가 아닌 문자를 입력하거나 숫자가 아닌 문자를 붙여넣는 것이 금지됩니다. ?

첫 번째 패스(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 중국어 웹사이트를 주목하세요!

성명：

이전 기사：JavaScript 배열 메서드 구문 분석다음 기사：JavaScript 배열 메서드 구문 분석

jQuery는 금액 입력 상자를 구현합니다.

관련 기사