JavaScript로 입력 한 후 확인 텍스트 상자 표시

Question

시작하기 전에 JavaScript 언어에 대해 전혀 알지 못한다는 사실을 전하고 싶습니다. 내가 사용했던 유일한 것들은 JQueryUI입니다 - 심지어 복사 붙여 넣기입니다.

현재 모든 표준 TextBox 입력을 가진 사용자 등록 페이지가 있습니다. 그러나 사용자가 원본 텍스트 상자에 텍스트를 입력 할 때마다 2 차 '전자 메일 확인'및 '암호 확인'을 슬라이드하고 싶습니다.

나는 지역 사회가 스스로를 도왔다는 것을 증명할 수있는 사람들을 도우려는 것을 좋아하지만 현재 내가 보여야하는 유일한 것은 을 찾으려고 노력하고 실패한 것입니다.

누군가이 방법을 보여 주시겠습니까?

편집 : 당신은 그 상자가 작성되면 전자 메일 텍스트 상자 아래에 새로운 텍스트 상자를 가지고 innerHTML을 사용할 수 있습니다 코드

<div class="ctrlHolder"> 
    <asp:Label ID="Label9" runat="server" Font-Bold="True" Text="Password"></asp:Label> 
    <asp:Label ID="Label11" runat="server" CssClass="styleLabelWatermarkWashout" Text="**********"></asp:Label> 
    <br /> 
    <%--data-default-value="Placeholder text"--%> 
    <asp:TextBox ID="txtRegisterPassword" runat="server" CssClass="textInput styleTextBoxCenter required" 
     TextMode="Password" MaxLength="20"></asp:TextBox> 
</div> 

Answer 1

jquery에 대한 참조를 작업중인 페이지에 추가합니다. 그런 다음 텍스트 상자에 대한 onkeyup 이벤트에 새 함수를 첨부하는 새 스크립트 (페이지 또는 별도의 .js 파일)를 만듭니다. 이 같은.

$(document).ready(function() 
{ 
    $('mytextbox').bind('keyup', function() { 
     $('myCOnfirmationTextbox').slideDown(); 
    }; 
}); 

이 함수는 "mytextbox"클래스 또는 ID에 해당하는 모든 요소에이 함수를 연결합니다. 따라서 입력이 <input type="text" id="email" class="emailInput"/> 인 경우 $('#email')을 사용하여이 특정 요소에 이벤트를 바인딩하십시오. 또는 $('.Emailinput')을 사용하여 이메일의 모든 입력 요소에 바인딩합니다.

그러나 코드를 테스트하지는 않았지만이 코드 또는 유사한 코드가 작동해야합니다.

.js 파일을 별도로 사용하는 경우 페이지에서 파일을 참조하는 것을 잊지 마십시오.

Answer 2

암호 상자의. 여기에 코드를 게시 할 수 있다면 코드를 제공 할 수 있습니다.

Answer 3

• HTML에 따라이 대답에서 컨트롤 ID를 바꿉니다.

다음과 같은 방법으로 확인 컨트롤을 표시 할 수 있습니다.

$('#password').onfocusout(function() { 
     // This will show once you complete entering Email and Password. 
     $('#confirmEmail').attr('display', 'inline'); 
     $('#confirmPassword').attr('display', 'inline'); 
    }); 

이메일 확인 방법을 알려주십시오. 같은 것을 암호 확인을 위해 사용할 수 있습니다.

전자 메일 확인 텍스트 상자에 초점을 맞추면 전자 메일 및 전자 메일 확인 텍스트 상자에 사용자가 입력 한 전자 메일을 비교합니다.

이

마찬가지로 당신이 확인 암호를 확인하실 수 있습니다 방법을

$('#confirmEmail').onfocusout(function() { 
    if($('#confirmEmail').val() == $('#Email').val()) 
{ 
     // Emails entered are same 
} 
else 
{ 
    alert('Emails entered are not matching. Please reenter emails.'); 
} 
}); 

다음에 수행 할 수 있습니다.

Answer 4

그래서 가정이 유사 마크 업 만들 수 있습니다

<div class="ctrlHolder"> 
    <asp:Label ID="PasswordLabel" runat="server" Font-Bold="True" Text="Password"></asp:Label> 
    <asp:Label ID="Label11" runat="server" CssClass="styleLabelWatermarkWashout" Text="**********"></asp:Label> 
    <br /> 
    <%--data-default-value="Placeholder text"--%> 
    <asp:TextBox ID="txtRegisterPassword" runat="server" CssClass="textInput styleTextBoxCenter required" TextMode="Password" MaxLength="20"></asp:TextBox> 
</div> 

<div id="confirm-password-box" class="ctrlHolder"> 
    <asp:Label ID="ConfirmPasswordLabel" runat="server" Font-Bold="True" Text="Confirm Password"></asp:Label> 
    <asp:Label ID="Label12" runat="server" CssClass="styleLabelWatermarkWashout" Text="**********"></asp:Label> 
    <br /> 
    <%--data-default-value="Placeholder text"--%> 
    <asp:TextBox ID="txtConfirmRegisterPassword" runat="server" CssClass="textInput styleTextBoxCenter required" TextMode="Password" MaxLength="20"></asp:TextBox> 
</div> 

당신은 기본적으로 숨겨져 #confirm-password-box을 만들기 위해 몇 가지 CSS 규칙을 추가 할 것입니다. 그런 다음, (가능한 </body> 태그를 닫는 것이 바람직 가까운) 페이지에 어딘가에이 스크립트 코드를 추가 : 컨트롤이 포커스를 잃으면

는

<script> 

$(function(){ 

    $('#<%: txtRegisterPassword.ClientID %>').on('blur', function(event){ 

     $('#confirm-password-box').slideToggle('slow'); 

    }); 

}); 

</script> 

blur 이벤트가 발생합니다. keyup을 듣고 싶지는 않습니다. 사용자가 암호 상자에 문자를 입력 할 때마다이 코드가 호출되어야하기 때문에 ...

이 특정 jQuery 코드에는 jQuery 1.7 또는 높은이므로 NuGet을 사용하여 스크립트 참조를 업데이트하십시오 (이전 버전의 jQuery가 필요한 경우 사용하지 않는 경우).