onKeyUp 이벤트 적용 -EasyUI

개요

  EasyUI의 textbox에는 원래의 <input>에 적용할 수 있는 이벤트 중에 onChange만 설정할 수 있습니다. 그 외에는 지원을 하지 않기 때문에 직접 textbox 객체를 받아서 설정하는 방법을 사용합니다.

예제코드

$('#box').textbox('textbox').on('keyup', function(event) {
	const $box = $('#box');
	const text = $box.textbox('getText');
	
	// 숫자, 영문, 한글 가능. 특수문자 ;:,.?!-_()*%#만 가능.
	const regExp = /[^\s\wㄱ-힣;:,.?!\-()*%#]/g;
	let safeText = text.replace(regExp, '');
	
	// 최대 60자.
	const max = 60;
	if (max < safeText.length) {
		safeText = safeText.substring(0, max);
	}
	$box.textbox('setValue', safeText);
});

해설

  textbox라는 메서드 호출을 통해 얻은 객체에 이벤트를 붙일 수 있습니다. 이를 통해 EasyUI가 지원하지 않는 이벤트도 사용 가능합니다. numberbox에도 동일한 방식으로 사용 가능합니다.

  참고로 위 방식을 몰랐을 때는 아래처럼 복잡한 방식으로 구현하기도 했습니다.

$('#box1').numberbox({
	inputEvents:$.extend({},$.fn.numberbox.defaults.inputEvents,{
		keyup : function(event) {
			const text = $('#box1').numberbox('getText');
			if (3 <= text.length) {
				$('#box2').textbox('textbox').focus();
			}
		},
	})
});