2011-04-26 5 views
5

텍스트 상자 asp.net 서버 컨트롤이 있습니다. 내가 텍스트 상자의 텍스트가 변경되면 자바 스크립트에서 텍스트 상자의 값을 수정하고 싶습니다. 나는 텍스트가 바뀔 때 잃어버린 foucs에서 호출되는 onchange 이벤트를 시도했다. 하지만 제 경우에는 Javascript에서 텍스트가 바뀝니다. 내가 어떻게 이걸 얻을 수 있니?자바 스크립트에서 텍스트 상자 변경 이벤트를 감지하는 방법

답변

6

value 속성 을 업데이트하면이 변경 이벤트를 트리거하지 않습니다. 변경 이벤트는 사용자에 의해 트리거됩니다.

당신은 값을 변경하고 당신이해야 할 어떤 다른 수행하는 함수를 작성할 수 있습니다

...

function changeTextarea(str) { 
    document.getElementById('a').value = str; 
    // Whatever else you need to do. 
} 
... 또는 textarea의 값을 폴링 ...

(function() { 
    var text = getText(); 
    var getText = function() { 
     return document.getElementById('a').value; 
    } 

    setInterval(function() { 
     var newtext = getText(); 
     if (text !== newText) { 
      // The value has changed. 
     } 
     text = newText; 
    }, 100); 
})(); 

... 또는 onchange() 이벤트를 직접 호출하십시오.

document.getElementById('a').onchange(); 

(당신이 onchange 속성과 이벤트를 설정 가정.)

해결 방법은 정말 좋은 솔루션이 아니다. 어느 쪽이든, textareavalue 속성을 업데이트 할 때 추가 코드를 트리거하기 위해 개입해야합니다. 당신이 jQuery를 사용할 수있는 경우

+0

... 아래를 참조하십시오. –

+2

@Cos 그것은 OP가 결코 언급하지 않은 jQuery와 같습니다. 또한 당신은 명시 적으로'change()'를 호출한다. 이것은 기본적으로 내가 대답 한 내용이다. – alex

+0

@Alex jquery는 javascript (또는 오히려 자바 스크립트 모음)이며, .change()를 호출하면 OP가 제시하는 목표를 달성 할 것이라는 것을 보여줍니다. "다른 작업을 수행하는 모든 작업을 수행합니다." –

-1

, 그것은 당신이 자바 스크립트 따라서이 페이지를 다시로드 이벤트를 강제로 다시 게시를 강제 할 수이

$('#id_of_text_area').change(function(){ 
    //do something 
}); 
0

같은 것입니다. Page.GetPostBackEventReference()에서 이벤트를 처리하고 다른 이벤트를 실행할 수 있습니다.

이 좋은 솔루션 thougth 아닌 내가 진정으로 아마 Ajax.NET

다음 link으로, .NET hadle 모든 자바 스크립트를 통해 당신이 모든 것을 할 것을 권장 또는 자바 스크립트를 삭제하고 보자는 당신이 그것을 할 HWO 설명 보통 버튼의 경우이지만 onchange 이벤트로 만들기가 어렵지 않아야합니다.

0

당신은 '변화'핸들러를 할당하고 다음과 같이 핸들러를 호출 할 수 있습니다 jQuery를 사용 : 당신은 가장 확실하게이 작업을 수행 할 수 있습니다

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      //makes 'DetectChange' the handler when TextBox1 changes... 
      $('#TextBox1').change(function() { 
       DetectChange(); 
      }); 
     }); 

     function DetectChange() { 
      alert("TextBox1 has been changed"); 
     } 

     function ClickTheButton() { 
      // .val actually 'changes the value' 
      // while you have to add .change() to invoke the actual change event handler... 
      $('#TextBox1').val("Changed When Button Clicked").change(); 

      //return false prevents the click event of the button from doing a post back 
      //keeping everything on the client for this sample.. 
      return false; 
     } 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
     <input id="Button1" type="button" value="Change TextBox1" onclick="return ClickTheButton();" /> 
    </div> 
    </form> 
</body> 
</html> 
+1

'DetectChange'를'click()'메소드에 직접 전달하지 않는 이유는 무엇입니까? – alex

+1

@Alex OP는 '하지만 내 경우에는 자바 스크립트에서 텍스트가 변경됩니다.'라고 말하며 버튼의 클릭 이벤트를 사용하여 시나리오의 요소를 시뮬레이션했습니다. 나는 'javascript OP가 무엇을 사용하는지, 어떻게 호출되는지 모른다. 그래서 나는 비슷한 것을할만한 데모를 만들어 냈다. 클릭에서 '.change'를 호출 할 수 있으며 OP의 요구 사항을 충족하는 경우 올바른 것입니다. –

관련 문제