부트 스트랩 툴팁을 제거 할 수 없습니다

-1

jquery를 사용하여 텍스트 상자에 특수 문자를 입력하도록 사용자를 제한합니다. 부트 스트랩 tooltip.but으로 사용자에게 오류 메시지가 표시됩니다. 사용자가 텍스트 상자에 올바른 데이터를 입력 한 경우 부트 스트랩 툴팁을 삭제할 수 없습니다.부트 스트랩 툴팁을 제거 할 수 없습니다

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="style.css"> 
     <script src="script.js"></script> 
     <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> 
     <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'> 
     <link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" /> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script> 
     <script> 
      var specialKeys = new Array(); 
      specialKeys.push(8); //Backspace 
      specialKeys.push(9); //Tab 
      specialKeys.push(46); //Delete 
      specialKeys.push(36); //Home 
      specialKeys.push(35); //End 
      specialKeys.push(37); //Left 
      specialKeys.push(39); //Right 
      specialKeys.push(64); 
      var mainelemnt; 
      function IsAlphaNumeric(elment, e) { 
       mainelemnt = elment; 
       var keyCode = (window.event) ? e.charCode : e.keyCode; 
       var ret = ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || keyCode == 64 || keyCode == 46 || keyCode == 32 || (keyCode >= 97 && keyCode <= 122) || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode)); 
       if (ret == false) { 
        $(mainelemnt).tooltip('show'); 
       } else { 
        $(mainelemnt).tooltip('destroy'); 
       } 
       return ret; 
      } 

     </script> 
    </head> 
    <body> 
     <div id="mydiv" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="margin-top:100px"> 
      <input class="mdl-textfield__input" type="text" id="username" onkeypress="return IsAlphaNumeric(this, event);" data-placement="top" data-toggle="tooltip" data-original-title="special charecters are not allowed" onblur="ValidateEmail(this)" /> 
      <label class="mdl-textfield__label" for="username">Username</label> 
     </div> 
    </body> 
</html>

플 런커 코드 : https://plnkr.co/edit/L4Hqq15HfQgOGm2R1m80?p=preview.

출처

2016-10-24 srilu

내 질문에 downvote 누가 무게가 그 뒤에 이유입니다. – srilu

아니지만, 귀하의 질문이 (모든 코드를 연결하기보다는) 문제 영역을 식별하기위한 노력을 거의하지 않아서라고 생각합니다. 툴팁을 제거 할 줄과 시도한 줄을 설명하십시오. 그래서 일반적으로 친숙한 곳이지만 노력이 부족하다고 여겨지는 질문에는 유사한 설명이없는 문제가 있습니다. –

안녕하세요 @AdamHopkinson, 사용자가 텍스트 상자에 특수 문자를 입력하면 오류 메시지가 부트 스트랩 도움말로 표시됩니다. 사용자가 수정 된 데이터를 입력했습니다. 그러나 툴팁이 잘못된 데이터를 입력하면 오류가 발생합니다. 툴팁이 올바르게 표시되었지만 올바른 데이터를 입력 한 후에 툴팁이 여전히 표시됩니다. 누락 된 링크를 참조하십시오. – srilu

나는 당신이 당신의 문제를 과도하게 복잡하게 만든 littblebit이라고 생각합니다. 키 업이 발생하면 문자를 테스트하지 말고 문자열 전체를 테스트해야합니다.

누군가 마우스로 무언가를 붙여 넣으면 어떨까요? 지금 당신은 여기

$.fn.isValidAlphaNum = function() { 
    return /^[a-zA-Z0-9]*$/.test($(this).val()); 
}; 

$('#username').keyup(function (e) { 
    if (!$(this).isValidAlphaNum()) { 
     alert('Not valid'); 
     //Show the tooltip 
    } else { 
     alert('Valid'); 
     //Hide the tooltip 
    } 
});

는 작업 jsFiddle입니다 ... 자신을 흐리게에 할당 할 수 있습니다.

출처

2016-10-24 15:02:06 vaso123

안녕하세요, 저는이 답변을 알고 있습니다, 나는 내 코드와 같은 특수 문자를 입력하도록 사용자를 차단하려고합니다. – srilu

키 업에서 발생하는 것과 마찬가지로 동일합니다. 붙여 넣기 이벤트에도 추가하십시오. 이것은 모든 키 업에서 전체 문자열을 검사합니다. – vaso123

부트 스트랩 툴팁을 제거 할 수 없습니다

답변

관련 문제