[태그:] html

HTML
tag self closing issue

Rails 개발 중 의문의 버그

환경

  • Ruby 2.3.4
  • Rails 5.0.4

증상

<div class="modal fade">
...
<%= form_tag "/videos", method: 'get' do %>
  <%= select_tag(:environment_id, options_for_select(['dev','prod']), class: "form-control", include_blank: true, onchange: "this.form.submit();") %>
<% end %>
...
</div>

이런 형태의 erb를 만들어서 view 안에서 render 로 view 를 부분적으로 생성했습니다.

그런데!

<form method=“get”  accept-charset="UTF-8"></form>
<select ...

이런 식으로 form tag 가 지맘대로 닫히고 그 아래에 select 태그가 생겼습니다.

이것 때문에 onchange 의 스크립트에서 문제가 생겼습니다.

해결

구글링을 하던 중..

루비 포럼에서 Form tag self closing 이라는 글을 발견했습니다.

참고: form tag is self-closing before input fields (HAML generator used)

문제는 이것
That's not legal markup. Either wrap the form around the entire table or put it completely inside a cell.

<td> 태그안으로 modal view를 넣어서 해결했습니다.

[tip] jquery input text에 숫자나 알파벳만 입력 받기

jquery 를 이용해서 html input tag에 숫자와 알파벳만 입력받도록 만든다.

웹 개발을 하다보면 인풋태그에 원하는 값만을 입력 받고 싶을 때가 있다.

현재 게임 운영툴을 개발하면서 숫자만 입력 받고 싶은 경우가 생겼다.

라이브러리를 찾아보았으나 한글이 입력되거나 특수문자가 입력되는 경우가 발생했다.

그래서 기존 라이브러리에 코드를 추가해서 한글이나 특수문자를 막고 숫자만 입력받는 로직을 만들었다.

필요하신분은 참고 하시길.

참고로 숫자입력만 허용하는 로직만 테스트된 상태며, 테스트는 구글 크롬에서만 하였다. (현재 운영툴이 크롬을 대상으로 개발하고 있기 때문)
익스플로러에서는 안됐던 듯 싶다.

사용법은 아래 링크타고 가서 원래 라이브러리파일을 다운 받으면 index.html에 상세히 있다.

https://github.com/johnantoni/jquery.alphanumeric

수정한 코드.

(function($){

	$.fn.alphanumeric = function(p) { 

		p = $.extend({
			ichars: "!@#$%^&*()+=[]\\\';,/{}|\":<>?~`.-_ ",
			nchars: "",
			allow: ""
		  }, p);	

		return this.each
			(
				function() 
				{

					if (p.nocaps) p.nchars += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
					if (p.allcaps) p.nchars += "abcdefghijklmnopqrstuvwxyz";

					s = p.allow.split('');
					for ( i=0;i<s.length;i++) if (p.ichars.indexOf(s[i]) != -1) s[i] = "\\" + s[i];
					p.allow = s.join('|');

					var reg = new RegExp(p.allow,'gi');
					var ch = p.ichars + p.nchars;
					ch = ch.replace(reg,'');

					$(this).keydown
						(
							function (e)
								{

									if (!e.charCode) k = String.fromCharCode(e.which);
										else k = String.fromCharCode(e.charCode);
									// Korean filtering,  modified by ktg. 
									// if (k.charCodeAt(0) == 229) e.preventDefault();
									// exception not ascii code, and shift + number keys
									if (33 <= e.which && e.which <= 40) return;
									// 컨트롤 c,v,x,a는 허용
									if (e.ctrlKey && (k.match(/(c|v|x|a)/i) != null)) return;
									// 아스키코드 이외의 글자는 막기
									if (k.charCodeAt(0) > 127) e.preventDefault();
									// 특수문자 막기
									if (e.shiftKey&&k.match(/\d+/g)!=null) e.preventDefault();

									if (ch.indexOf(k) != -1) e.preventDefault();
									if (e.ctrlKey&&k=='v') e.preventDefault();

								}

						);

					$(this).bind('contextmenu',function () {return false});

				}
			);

	};

	$.fn.numeric = function(p) {

		var az = "abcdefghijklmnopqrstuvwxyz";
		az += az.toUpperCase();

		p = $.extend({
			nchars: az
		  }, p);	

		return this.each (function()
			{
				$(this).alphanumeric(p);
				// 복사 붙여넣기 방지 로직
				$(this).keyup
					(
						function (e)
							{
								var newVal = $(this).val().replace(/[^0-9\s]/gi,"");
								if (newVal != $(this).val()) {
									$(this).val( $(this).val().replace(/[^0-9\s]/gi,"") );
								}
							}
					);
			}
		);

	};

	$.fn.alpha = function(p) {

		var nm = "1234567890";

		p = $.extend({
			nchars: nm
		  }, p);	

		return this.each (function()
			{
				$(this).alphanumeric(p);
			}
		);

	};	

})(jQuery);