2014-01-16 7 views
0

큰 텍스트 블록을 붙여 넣을 수있는이 텍스트 상자가 있으며 텍스트 줄 수를 출력합니다. 그러나 단일 키를 상자에 넣은 후에 만 ​​작동합니다. 그래서 마우스 오른쪽 버튼을 클릭하고 "붙여 넣기"를 누르면 키보드의 키를 누를 때까지 줄 수는 표시되지 않습니다.
텍스트를 붙여 넣을 때 줄 수를 자동으로 표시하도록하려면 어떻게해야합니까?텍스트를 인식하는 함수를 만드는 방법은 무엇입니까?

<!DOCTYPE html> 
<html> 
<head> 

<style type="text/css"> 
textarea { 
    border: 0 none white; 
    overflow: hidden; 
    padding: 0; 
    outline: none; 
    background-color: #D0D0D0; 
    resize: none; 
} 
</style> 

<script> 

function countLines(theArea) 
{ 
    var theLines = theArea.value.replace((new RegExp(".{"+theArea.cols+"}","g")),"\n").split("\n"); 

    if(theLines[theLines.length-1]=="") 
    theLines.length--; 
    theArea.form.lineCount.value = theLines.length; 
} 
</script> 

<script type="text/javascript"> 
var observe; 
if (window.attachEvent) 
{ 
    observe = function (element, event, handler) 
    { 
     element.attachEvent('on'+event, handler); 
    }; 
} 
else 
{ 
    observe = function (element, event, handler) 
    { 
     element.addEventListener(event, handler, false); 
    }; 
} 
function init() 
{ 
    var text = document.getElementById('text'); 
    function resize() 
    { 
     text.style.height = 'auto'; 
     text.style.height = text.scrollHeight+'px'; 
    } 
    /* 0-timeout to get the already changed text */ 
    function delayedResize() 
    { 
     window.setTimeout(resize, 0); 
    } 
    observe(text, 'change', resize); 
    observe(text, 'cut',  delayedResize); 
    observe(text, 'paste', delayedResize); 
    observe(text, 'drop', delayedResize); 
    observe(text, 'keydown', delayedResize); 

    text.focus(); 
    text.select(); 
    resize(); 
} 


</script> 

</head> 

<body onload="init();"> 
<form> 


<textarea rows="5" cols="40" style="height:1em;" id="text"; name="myText" onKeyUp="countLines(this)"> 

</textarea> 


<br> 
Cost: <input type=text name="lineCount" size="1" value="0"> Dollars 

</form> 
</body> 

</html> 
+1

음, _change_ 어떤 사람들을 위해 도전을. –

+1

당신은'Javascript' 또는'jQuery'가 필요합니다 – Ljubisa

+0

@Ljubisa #Sly이 –

답변

0

귀하의 문제는 당신이의 keyup 기능을 사용하는 것입니다 :

여기에 내 현재 코드입니다. 사용자가 텍스트를 붙여 넣고 아무 키도 누르지 않은 것을 기억하십시오. <textarea rows="5" cols="40" style="height:1em;" id="text"; name="myText" onchange="countLines(this)"> 

텍스트 영역의 값이 변경 될 때 발생하는 onchange 속성을 사용하십시오.

참고 :

$("textarea").change(function(){ //your function here}

Or even better

+0

어떤 이유로 OnChange가 전혀 작동하지 않습니다. – user3192299

+0

@ user3192299 대신 javascript (jquery)를 사용해보세요! –

0

당신은 일이 발생할 때 변경하도록 지시해야합니다 @Sly 더 좋습니다 자바 스크립트에서 이렇게 지적한다. 이 작업을 이미 완료했다면 질문을 편집하여 그렇게 말하십시오. 당신이 그 일을하고 그 다음 내가 몇 초마다 그것을 실행 제안, 작동하지 않는 경우, 지금

<textarea onchange="your_function();"> 

</textarea> 

:

나는 코드를 같이 보입니다 상상한다. 당신의 자바 스크립트에서

, 그건 당신이 사용중인 있다면,이 코드를 사용

window.setInterval(your_function, time_in_miliseconds) 
+0

나는 당신이'window.setInterval (your_function, time_in_miliseconds)';)을 의미한다고 생각한다. –

+0

고마워 ... 나는 여기에 게시해야 할 질문이 될 것이다. 왜냐하면 나는 그저 굉장하고 당신이하지 않는다는 것을 잊어 버리기 때문이다. 그()를해야만합니다. – ilarsona

+0

어디 setInterval 코드를 넣을까요? – user3192299

관련 문제