해제 버튼을 동적으로

6

버튼이 클릭되면 텍스트가 있는지 확인하십시오. 표시되지 않으면 경고 상자 (또는 다른 피드백 양식)를 팝업하여 사용자에게 데이터 입력을 알리고 버튼 기능을 수행하지 마십시오.

예 :

<input id="myText" type="text" onkeyup="stoppedTyping()"> 
<input type="button" value="Click to begin!" id="start_button" onclick="verify()" disabled/> 

<script type="text/javascript"> 
    function stoppedTyping(){ 
     if(this.value.length > 0) { 
      document.getElementById('start_button').disabled = false; 
     } else { 
      document.getElementById('start_button').disabled = true; 
     } 
    } 
    function verify(){ 
     if myText is empty{ 
      alert "Put some text in there!" 
      return 
     } 
     else{ 
      do button functionality 
     } 
    } 
</script>

출처

2011-08-15 15:37:49 yoozer8

+0

+1 사용자가 상황에 맞는 메뉴를 사용하여 텍스트 상자 값을 삭제하는 경우에도 작동합니다. – pimvdb

+0

왜 downvote? – yoozer8

1

당신은 입력 값을 폴링 할 수있다. 이것은 덜 효율적이고 덜 반응하지만 잠재적으로 더 신뢰할 수 있습니다.

지적했듯이 입력 값을 지울 때 keyup 이벤트가 반드시 발생하지 않습니다. 마우스로 텍스트를 강조 표시하고 마우스 오른쪽 버튼으로 클릭하고 잘라내면 어떻게됩니까?

변경 이벤트가 도움이 될 수 있지만 여전히 그다지 신뢰할만한 것은 아닙니다. 흐림 효과 만 발생하고 일부 변경 사항은 누락됩니다 (자동 완성 선택과 같은).

여기에 a jsFiddle은 폴링 솔루션을 보여줍니다. Eng.Fouad의 의견에 대응

는, 여기에 JS에 추가하는 방법은 다음과 같습니다

당신은 다음과 같이 스크립트 태그에 넣어 수 :

<script type="text/javascript"> 
    //my code 
</script>

작동 할 수 있지만, 사용자 브라우저가 자바 스크립트를 캐시하지 않는다는 것을 의미합니다. 즉, 페이지를로드하는 데 더 오래 걸립니다. 또한 스크립트를 컨텐츠와 분리하는 것이 더 깔끔합니다. 그러나 빠르고 쉬운 옵션을 원하면이 작업을 수행해야합니다. 이것을 몸의 맨 아래에 놓고 DOM 준비 처리기로 감 쌉니다 (답변의 아래 부분 참조).

클리너 옵션으로 외부 파일에 넣을 수 있습니다. someScript.js, 그 내용은 자바 스크립트 (스크립트 태그 없음) 일 것입니다. 그런 다음 HTML 파일에서 해당 스크립트 링크 :

<html> 
    <head></head> 
    <body> 
     <!-- contents of page --> 
     <script type="text/javascript" src="/path/to/someScript.js"></script> 
    </body> 
</html>

NB을 : 당신은 http://www.your-site.com/path/to/someScript.js 해당 검색이 스크립트에 액세스 할 수 있도록 스크립트 웹에 액세스 할 수 있도록해야합니다.

스크립트 태그는 본문 맨 아래에 있으므로 실제 콘텐츠가 먼저로드되고 나중에 스크립트가로드됩니다. 즉, 사용자가 귀하의 콘텐츠를 더 빨리 볼 수 있습니다.

jsFiddle의 JavaScript를 마지막으로 수정해야합니다. jsFiddle에는 "onDomReady"라는 코드가 있습니다 (바이올린의 왼쪽 위 참조). 전문적으로, 당신은 당신의 내용 후에 당신의 원본이있는 경우에 이것을 할 필요가없는 다. 스크립트가 컨텐츠가로드 된 후 실행되도록 보장하여 스크립트가 DOM에서 요소를 찾으려고하면로드되어 발견됩니다. 어떤 이유에서든 스크립트를 내용 앞에 놓기 때문에 스크립트에이 스크립트를 추가해야합니다.jQuery를에 DOM 준비 처리기에서 스크립트를 포장하기 위해, 다음을 수행하십시오 //my code 댓글 페이지가 준비 경우에만 실행됩니다된다

$(function(){ 
    //my code 
});

을 그 예에서 코드를 넣어.

출처

2011-08-15 15:56:06 Spycho

+0

죄송합니다, 아직 초급이지만 자바 스크립트 코드는 어디에 두어야합니까? 스크립트 태그에 추가하려고했지만 오류가 발생합니다. –

+0

JS 파일에 넣고 문서 준비 처리기로 래핑해야합니다 (페이지의 내용이로드되기 전에 실행되지 않도록). 그런 다음 HTML 파일에서 JS 파일의 URL 인 src 속성과 함께 script 태그를 추가하십시오. 이 스크립트 태그를 페이지의 맨 아래에 놓으면 페이지의 내용이 먼저로드됩니다. 나는 내 대답을 더 자세하게 설명 할 것이다. – Spycho

0

<input type="number" id="abc" onkeyup="s()"> 
<input type="submit" id="abc2" disabled > 
<script type="text/javascript"> 
function s(){ 
var i=document.getElementById("abc"); 
if(i.value=="") 
    { 
    document.getElementById("abc2").disabled=true; 
    } 
else 
    document.getElementById("abc2").disabled=false;}</script>

출처

2017-07-10 07:00:37

해제 버튼을 동적으로

답변

관련 문제