버튼 클릭시 클라이언트 측 스크립트를 사용하여 텍스트 상자를 수정하는 방법

debugcn 에 게시 Dev

브라이언 프레슬러

AJAX Webforms와 함께 ASP.NET을 사용하여 인터페이스를 개발 중입니다. 페이지 초기화시와 PIN 번호로 사용자를 확인하기 위해 다양한 작업이 요청 된 후 업데이트 패널이 표시됩니다. 인터페이스는 대부분 태블릿에서 사용되므로 다음과 같은 사용자의 PIN 번호를 수집하는 버튼이있는 키패드를 만들었습니다.

버튼을 클릭하면 다음이 실행됩니다.

protected void btn0_Click(object sender, EventArgs e)
{
    AddNumberToPin("0");
}

레이블이 지정된 번호를 인수로 사용하여 호출하는 절차 strDigit는 다음과 같이 정의됩니다.

protected void AddNumberToPin(string strDigit)
{

    txtPIN.Text += strDigit;
    if (txtPIN.Text.Length == 5)
    {
        ...
        ...check database to validate the pin
        ...
    }

}

이것은 작동하지만 모든 버튼 클릭이 웹 서버로의 또 다른 왕복을 생성하기 때문에 매우 느립니다. 수집 된 PIN을 클라이언트의 로컬 변수에 저장 한 다음 5 자리 숫자가 수집 된 후에 만 서버에 게시하는 것이 간단해야 할 것 같습니다. 저는 웹 프로그래밍이 처음이라서 어떻게해야할지 모르겠습니다.

나는 이것 과 this를 읽었 지만 여전히 서버에 게시를 중지하는 버튼을 얻는 방법을 알 수 없습니다. 이것이 가능한가?

코너 스팬

ASP.NET Button에는 OnClick서버 측 이벤트 처리기를 설정할 수 있는 속성이 있습니다. 또한 OnClientClick버튼을 클릭 할 때 먼저 실행할 클라이언트 코드를 포함 할 수 있는 속성이 있습니다. 해당 클라이언트 코드가를 반환 false하면 서버에 대한 포스트 백이 취소됩니다.

두 속성 모두 버튼의 마크 업에서 설정할 수 있습니다.

<asp:TextBox ID="txtPIN" runat="server" />
<asp:Button runat="server" Text="0" OnClientClick="return addDigit(this);" OnClick="btn_Click" />
<asp:Button runat="server" Text="1" OnClientClick="return addDigit(this);" OnClick="btn_Click" />
<asp:Button runat="server" Text="2" OnClientClick="return addDigit(this);" OnClick="btn_Click" />
...

TextBox에 5 자리 미만이 삽입 된 경우 Javascript addDigit함수가 반환되어야합니다 false.

<script type="text/javascript">
    function addDigit(btn) {
        var txtPIN = document.getElementById('<%= txtPIN.ClientID %>');
        txtPIN.value += btn.value;
        return txtPIN.value.length >= 5;
    }
</script>

해당 스크립트 블록은 <Head>HTML 문서 의 섹션 또는 양식 하단에있을 수 있습니다.

코드 숨김의 이벤트 처리기는 PIN 유효성 검사를 수행합니다.

protected void btn_Click(object sender, EventArgs e)
{
    // Check database to validate the PIN
    string pin = txtPIN.Text;
    ...
}

참고 :이 구문 '<%= txtPIN.ClientID %>'은 ASP.NET에서 수행되는 가능한 ID 변경을 설명하기 위해 Javascript 코드에서 사용됩니다.

난 당신이있는 것을 알 수 Back 귀하의 UI에있는 버튼을 누릅니다. 마지막 숫자를 제거하면 클라이언트 코드에서 해당 명령을 처리하고 반환 false 하여 포스트 백을 방지 할 수도 있습니다 .

<asp:Button ID="btnBack" runat="server" Text="Back" OnClientClick="removeLastDigit(); return false;" />

자바 스크립트 블록에 추가 된 다음 함수 사용 :

function removeLastDigit() {
    var txtPIN = document.getElementById('<%= txtPIN.ClientID %>');
    txtPIN.value = txtPIN.value.substring(0, txtPIN.value.length - 1);
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-9

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

버튼 클릭시 클라이언트 측 스크립트를 사용하여 텍스트 상자를 수정하는 방법

버튼 클릭시 클라이언트 측 스크립트를 사용하여 텍스트 상자를 수정하는 방법

C # 스크립트로 클라이언트 측에서 텍스트 상자 텍스트를 변경하는 방법

버튼 클릭시 Jquery를 사용하여 텍스트 상자를 제거하는 방법

클라이언트 측 자바 스크립트를 사용하여 HTML 스냅 샷을 서버로 보내기

Express 4.0을 사용하여 클라이언트 측에서 서버 측으로 일부 텍스트를 다시 전달하는 방법은 무엇입니까?

클라이언트 측 자바 스크립트를 사용하여 NPM 버전 태그 가져 오기

클라이언트 측 자바 스크립트에서 Grafana Http API를 사용하는 방법

클릭시 버튼 텍스트를 변경하는 방법

자바 스크립트를 사용하여 버튼 클릭으로 텍스트 상자 추가

링크 버튼 클릭시 GridView에서 텍스트 상자를 표시하고 숨기는 방법

답안 확인 버튼 클릭시 자바 스크립트를 이용하여 정답 색상을 변경하는 방법

PHP를 사용하여 제출 버튼 클릭시 텍스트 상자의 데이터를 데이터베이스에 저장하는 방법

클라이언트 측에서 자바 스크립트를 사용하여 HTML 태그에서 이미지를 만드는 방법은 무엇입니까?

자바 스크립트를 클릭하여 버튼을 바꾸는 방법

자바 스크립트를 사용하여 클릭시 부트 스트랩 버튼을 활성화하는 방법

Tkinter를 사용하여 클릭시 텍스트를 변경하는 버튼 배열을 만드는 방법

자바 스크립트에서 버튼 클릭시 텍스트 입력을 활성화하는 방법

버튼 클릭시 div에 이미지 및 텍스트 상자를 추가하는 방법

버튼을 계속 클릭하여 자바 스크립트에서 다음 요소를 표시하는 방법

mvc에서 html 제출 버튼을 클릭하여 클라이언트 측을 호출하는 방법

자바 스크립트 텍스트 상자를 사용한 클라이언트 측 확인

socket.io를 사용하여 서버에서 클라이언트 측 메소드를 호출하는 방법

버튼 클릭시 div 안에 텍스트 상자를 표시하는 방법은 무엇입니까?

아래 코드에 언급 된 자바 스크립트를 사용하여이 버튼을 클릭하는 방법

자바 스크립트를 통해 버튼 클릭과 버튼 클릭을 구별하는 방법

자바 스크립트를 사용하여 버튼을 클릭 할 때 ul에 여러 div의 p 태그 내용을 표시하는 방법

자바 스크립트에서 버튼 클릭 후 "No More Data"메시지를 표시하는 방법

자바 스크립트를 사용하여 클릭 후 버튼 텍스트 변경

브라우저 창을 변경하지 않고 mod_python을 사용하여 버튼 클릭시 Python 스크립트를 실행하는 방법

Icommand를 사용하여 모델보기에서 버튼 클릭시 숫자 유형 텍스트 상자를 지우는 방법