2013-03-04 5 views
-1

Enter 키를 눌러 웹 페이지에 텍스트를 표시하는 방법은 javascript/jquery에있을 수 있습니까?Enter 키를 눌러 텍스트 표시

누군가가 페이지를 열고 텍스트를 입력하는 것보다 한 줄씩 텍스트가 시작되는 것처럼 보이기를 바랍니다. 터미널을 통해 리눅스에 뭔가를 설치할 때처럼 텍스트가 한 줄씩 한 줄씩 나타나서 그 유형의 애니메이션을 원하십니까? 정적/일반 텍스트 라인 웹 페이지에서

감사

의 진행률 표시 줄 내가 비행기 텍스트의 각 라인은 예를 들어 다른

후 하나를 제공하는 터미널 같은 간단한 애니메이션을 원하는 내가 열었습니다 아니 웹 페이지와 나는 터미널보다 텍스트 입력 시작을 누르십시오. 라인별로 라인

샘플 코드

<html> 
<head> 

<head> 
<body> 
<h1>PLease press enter</h1> 
<span id="line-1" class="hidden">some text here</span> 
<span id="line-2" class="hidden">some text here</span> 
<span id="line-3" class="hidden">some text here</span> 
<span id="line-4" class="hidden">some text here</span> 
<span id="line-5" class="hidden">some text here</span> 
</body> 
</html> 

중요 참고 내가 내가 잘못 편집 JQuery와 및 자바 스크립트

의 아무 생각이 없다?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html><head> 

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 
<title>Testn</title> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 

</head> 
<body> 

<script> 
$(document).bind("keypress", function (e) { 
var t = e.keyCode ? e.keyCode : e.which; 
if (t == 13) { 
if ($("#span1").is(":visible") == false) $("#span1").show(); 
else if ($("#span2").is(":visible") == false) $("#span2").show();) 
else if ($("#span3").is(":visible") == false) $("#span3").show();) 
else if ($("#span4").is(":visible") == false) $("#span4").show();) 
else $("#span5").show();) 
} 
</script> 
<span id="span1" >some text here</span> 
<span id="span2">some text here</span> 
<span id="span3" >some text here</span> 
<span id="span4" >some text here</span> 
<span id="span5">some text here</span> 

</body> 
</html> 
+0

업데이트? 이것은 문서 자체의 keydown/keuyp 이벤트로 수행 할 수 있습니다. – ryadavilli

+0

"jquery 타자기 효과"를 찾아서 이것을 기억하십시오 :'var isEnter = e.which == 13'. 약간의 작업을 통해 알아낼 수 있습니다. – elclanrs

+0

실제로 원하는 것을 모르지만 일반적으로 다음과 같이 입력 이벤트를 잡는 방법입니다. $ (document) .keypress (function (e) { if (e.which == 13) { // 사용자 후 원하는 것을하십시오. 조회수를 입력하십시오 } }); –

답변

0

는 JQuery와 on를 사용할 수있다 ..

jQuery를 1.7 바와 같이, CSTE 연구진() 메소드는 문서 이벤트 핸들러를 부착하기위한 바람직한 방법이다.

는 시도 무엇

$(function(){ 

    var $span=$('span'); 
    $span.hide(); // hide all soans in the document 
    var count= 1; 
    $(document).on("keyup", function (e) { 
    if (e.keyCode == 13) { 
    if(count <= $span.length){ 
     $('#'+count).show(); 
     count++; 
    } 
    } 
    }); 
}); 

fiddle here

+0

한 줄에 모든 줄을 표시 할 수 있습니까? – Yousaf

+0

예 ... http : //jsfiddle.net/bipen/GnyUA/1/..try this – bipen

+0

네, 좋지만 각 줄마다 한 번에 한 번에 1 초의 시간차가있을 수 있습니다. – Yousaf

관련 문제