• JS
  • J볃교

JAVASCRIPT & JQUERY 를 이용하여 INPUT에 있는 실시간 단어 나타내기

2018-12-20 219

설명

  • 카카오톡 링크

JAVASCRIPT & JQUERY 를 이용하여 INPUT에 있는 실시간 단어 나타내는 소스입니다 :D

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<h3 class="view_h3">JAVASCRIPT를 이용하여 실시간 INPUT 에 있는 단어 알아내기</h3>
<script type="text/javascript">
	function view_text(text) {
		var change_text = document.getElementsByClassName("text_view1");
		change_text[0].innerHTML = text;
	}
</script>
<input type="text" name="" id="" value="" title="" onkeyup="view_text(this.value)" />
<span class="text_view1"></span>


<h3 class="view_h3">JAVASCRIPT를 이용하여 실시간 INPUT 단어 대문자로 만들기</h3>
<script type="text/javascript">
	function view_text2(text) {
		var change_text = document.getElementsByClassName("text_view2");
		text = text.toUpperCase();
		change_text[0].innerHTML = text;
	}
</script>
<input type="text" name="" id="" value="" title="" onkeyup="view_text2(this.value)" />
<span class="text_view2"></span>

<h3 class="view_h3">JAVASCRIPT를 이용하여 실시간 INPUT 단어 소문자로 만들기</h3>
<script type="text/javascript">
	function view_text3(text) {
		var change_text = document.getElementsByClassName("text_view3");
		text = text.toLowerCase();
		change_text[0].innerHTML = text;
	}
</script>
<input type="text" name="" id="" value="" title="" onkeyup="view_text3(this.value)" />
<span class="text_view3"></span>

<h3 class="view_h3">JQUERY를 이용하여 실시간 INPUT 에 있는 단어 알아내기</h3>
<script type="text/javascript">
	$(document).ready(function() {
		$(".input1").on("keyup", function() {
			$(".text_view4").text($(this).val());
		});
	});
</script>
<input type="text" name="" id="" value="" title="" class="input1" />
<span class="text_view4"></span>