> 웹 프론트엔드 > JS 튜토리얼 > jQuery는 금액 입력 상자를 구현합니다.

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

高洛峰
풀어 주다: 2016-12-28 09:51:22
원래의
1578명이 탐색했습니다.

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

첫 번째 패스(function($){ })(jQuery); 모듈 격리를 위해 함수를 즉시 실행하므로 다른 기능 모듈 및 플러그인과 관련된 변수 오염 문제를 피할 수 있습니다. 즉시 실행 기능의 선두에 배치됩니다.

그런 다음 jquery 프로토타입에서 numbox 메소드를 확장하고 코드를 직접 입력하세요

(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)
로그인 후 복사

호출 메소드는 다음과 같습니다

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

위 내용은 전체 내용입니다 이 기사의 내용이 모든 사람의 공부나 업무에 도움이 되기를 바라며 PHP 중국어 웹사이트도 지원하고 싶습니다!

금액 입력 상자의 jQuery 구현과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿