onKeyPress 중에 입력 텍스트 상자의 텍스트를 얻는 방법은 무엇입니까?

Question 1

사용자가 입력 할 때 텍스트 상자에 텍스트를 가져 오려고 합니다 ( jsfiddle 놀이터 ).

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;

    //var s = $("#edValue").val();
    //$("#lblValue").text(s);    
}

<input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

스 니펫 확장

이 코드는 것을 제외하고, 오류없이 실행 값 의 input text동안, 상자 onKeyPress값 항상 전에 변화가 :

여기에 이미지 설명 입력

질문 : 텍스트 상자의 텍스트를 어떻게 얻 onKeyPress습니까?

보너스 채터

HTML DOM에는 "사용자가 입력 중" 과 관련된 세 가지 이벤트가 있습니다 .

onKeyDown
onKeyPress
onKeyUp

Windows 에서는 WM_Key사용자가 키를 누르고 있고 키가 반복되기 시작하면 메시지 순서 가 중요해집니다.

WM_KEYDOWN('a')-사용자가 A키를 눌렀습니다.
WM_CHAR('a')- a사용자로부터 캐릭터를 받았습니다.
WM_CHAR('a')- a사용자로부터 캐릭터를 받았습니다.
WM_CHAR('a')- a사용자로부터 캐릭터를 받았습니다.
WM_CHAR('a')- a사용자로부터 캐릭터를 받았습니다.
WM_CHAR('a')- a사용자로부터 캐릭터를 받았습니다.
WM_KEYUP('a')-사용자가 A키를 놓았습니다.

텍스트 컨트롤에 5 개의 문자가 나타납니다. aaaaa

중요한 점은 WM_CHAR메시지에 응답 하는 것, 반복 되는 메시지입니다. 그렇지 않으면 키를 누를 때 이벤트가 누락됩니다.

HTML 에서는 약간 다릅니다.

onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyUp

html로는 제공 KeyDown하고 KeyPress모든 키 반복합니다. 그리고 KeyUp이벤트는 사용자가 키를 놓을 때만 발생합니다.

테이크 아웃

나는 수 에 응답 onKeyDown하거나 onKeyPress,하지만 전에 모두는 여전히 제기되는 input.value업데이트되었습니다
onKeyUp텍스트 상자의 텍스트가 변경 될 때 발생하지 않기 때문에에 응답 할 수 없습니다 .

질문 : 텍스트 상자의 텍스트를 어떻게 얻 onKeyPress습니까?

보너스 읽기

Question 2

input이벤트 처리는 일관된 솔루션입니다. 모든 최신 브라우저에서 및 요소에 대해 지원 되며 필요할 때 정확히 실행 됩니다.textareainput

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;
}

<input id="edValue" type="text" onInput="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

스 니펫 확장

그래도 조금 다시 작성하겠습니다.

function showCurrentValue(event)
{
    const value = event.target.value;
    document.getElementById("lblValue").innerText = value;
}

<input id="edValue" type="text" onInput="showCurrentValue(event)"><br>
The text box contains: <span id="lblValue"></span>

스 니펫 확장

Question 3

단순하게 유지하십시오. onKeyPress()및 모두 사용 onKeyUp():

<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">

이렇게하면 가장 많이 업데이트 된 문자열 값 (키를 올린 후)을 가져오고 사용자가 키를 누르고 있으면 업데이트됩니다.

jsfiddle : http://jsfiddle.net/VDd6C/8/

Question 4

onKeyPress 동안 입력 텍스트 상자의 값은 항상 변경 전의 값입니다.

이것은 의도적 인 것입니다. 이벤트 리스너가 키 누르기를 취소 할 수 있도록합니다.

이벤트 리스너가 이벤트를 취소 하면 값이 업데이트되지 않습니다. 이벤트가 취소되지 않은 경우 값이 업데이트되지만 이벤트 리스너가 호출 된 후 입니다.

필드 값이 업데이트 된 후 값을 얻으려면 다음 이벤트 루프에서 실행할 함수를 예약하십시오. 이를 수행하는 일반적인 방법은 다음 setTimeout과 같은 시간 초과 로 호출 하는 것입니다 0.

$('#field').keyup(function() {
    var $field = $(this);

    // this is the value before the keypress
    var beforeVal = $field.val();

    setTimeout(function() {

        // this is the value after the keypress
        var afterVal = $field.val();
    }, 0);
});

여기에서 시도하십시오 : http://jsfiddle.net/Q57gY/2/

편집 : 일부 브라우저 (예 : Chrome)는 백 스페이스에 대한 키 누르기 이벤트를 트리거하지 않습니다. 코드에서 keypress를 keyup으로 변경했습니다.

Question 5

컴팩트하게 유지하십시오.
키를 누를 때마다 함수 edValueKeyPress()가 호출됩니다.
또한 해당 함수에서 일부 변수를 선언하고 초기화했습니다. 이로 인해 프로세스 속도가 느려지고 CPU와 메모리도 더 많이 필요합니다.
간단한 대체에서 파생 된이 코드를 간단히 사용할 수 있습니다.

function edValueKeyPress()
{
    document.getElementById("lblValue").innerText =""+document.getElementById("edValue").value;
}

그게 당신이 원하는 전부이며 더 빠릅니다!

Question 6

<asp:TextBox ID="txtMobile" runat="server" CssClass="form-control" style="width:92%;  margin:0px 5px 0px 5px;" onkeypress="javascript:return isNumberKey(event);" MaxLength="12"></asp:TextBox>

<script>
    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        return true;
    }
</script>

Question 7

지금까지 완전한 솔루션을 제공하는 답변은 없습니다. 해결해야 할 몇 가지 문제가 있습니다.

모든 키 누름이에 전달되지 않음 keydown및keypress 핸들러 (예 : 백 스페이스 및 삭제 키는 일부 브라우저에서 억제됨).
손질 keydown 은 좋은 생각이 아닙니다. keydown으로 인해 keypress가 발생하지 않는 상황이 있습니다!
setTimeout() 스타일 솔루션은 사용자가 입력을 중지 할 때까지 Chrome / Blink 웹 브라우저에서 지연됩니다.
마우스 및 터치 이벤트를 사용하여 잘라 내기, 복사 및 붙여 넣기와 같은 작업을 수행 할 수 있습니다. 이러한 이벤트는 키보드 이벤트를 트리거하지 않습니다.
입력 방법에 따라 브라우저는 사용자가 필드를 벗어날 때까지 요소가 변경되었다는 알림을 전달하지 않을 수 있습니다.

더 정확한 해결책은 처리 할 keypress, keyup, input, 및 change이벤트를.

예:

<p><input id="editvalue" type="text"></p>
<p>The text box contains: <span id="labelvalue"></span></p>

<script>
function UpdateDisplay()
{
    var inputelem = document.getElementById("editvalue");
    var s = inputelem.value;

    var labelelem = document.getElementById("labelvalue");
    labelelem.innerText = s;
}

// Initial update.
UpdateDisplay();

// Register event handlers.
var inputelem = document.getElementById("editvalue");
inputelem.addEventListener('keypress', UpdateDisplay);
inputelem.addEventListener('keyup', UpdateDisplay);
inputelem.addEventListener('input', UpdateDisplay);
inputelem.addEventListener('change', UpdateDisplay);
</script>

깡깡이:

http://jsfiddle.net/VDd6C/2175/

네 가지 이벤트를 모두 처리하면 모든 엣지 케이스를 포착합니다. 사용자의 입력으로 작업 할 때 모든 유형의 입력 방법을 고려하고 브라우저 간 및 장치 간 기능을 확인해야합니다. 위 코드는 내가 소유 한 모바일 장치뿐만 아니라 데스크톱의 Firefox, Edge 및 Chrome에서 테스트되었습니다.

Question 8

나는 일반적으로 필드의 값 (즉, 업데이트되기 전)을 키 이벤트와 관련된 키와 연결합니다. 다음은 최신 JS를 사용하므로 이전 IE의 지원을 조정해야합니다.

최근 JS 예

document.querySelector('#test').addEventListener('keypress', function(evt) {
    var real_val = this.value + String.fromCharCode(evt.which);
    if (evt.which == 8) real_val = real_val.substr(0, real_val.length - 2);
    alert(real_val);
}, false);

이전 IE 지원 예

//get field
var field = document.getElementById('test');

//bind, somehow
if (window.addEventListener)
    field.addEventListener('keypress', keypress_cb, false);
else
    field.attachEvent('onkeypress', keypress_cb);

//callback
function keypress_cb(evt) {
    evt = evt || window.event;
    var code = evt.which || evt.keyCode,
        real_val = this.value + String.fromCharCode(code);
    if (code == 8) real_val = real_val.substr(0, real_val.length - 2);
}

[편집-이 방법은 기본적으로 백 스페이스, CTRL + A와 같은 키 누름을 비활성화합니다. 위의 코드는 전자를 수용하지만 후자와 몇 가지 다른 결과를 허용하기 위해 추가 수정이 필요합니다. 아래 Ian Boyd의 의견을 참조하십시오.]

Question 9

쉬운...

keyPress 이벤트 핸들러에서

void ValidateKeyPressHandler(object sender, KeyPressEventArgs e)
{
    var tb = sender as TextBox;
    var startPos = tb.SelectionStart;
    var selLen= tb.SelectionLength;

    var afterEditValue = tb.Text.Remove(startPos, selLen)
                .Insert(startPos, e.KeyChar.ToString()); 
    //  ... more here
}

Question 10

따라서 각 이벤트에는 장단점이 있습니다. 이벤트 onkeypress및 onkeydown최신 값을 검색하지 않습니다.onkeypress 일부 브라우저에서 인쇄 할 수없는 문자에 대한 화재하지 않습니다. 그만큼onkeyup키가 여러 문자를 누른 상태로있을 경우, 이벤트는 감지하지 않습니다.

이것은 약간 해키하지만 다음과 같은 작업을 수행합니다.

function edValueKeyDown(input) {
    var s = input.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: "+s;

    //var s = $("#edValue").val();
    //$("#lblValue").text(s);    
}

<input id="edValue" type="text" onkeydown="setTimeout(edValueKeyDown, 0, this)" />

모든 세계의 최고를 다루는 것 같습니다.

Question 11

event.key 를 사용하여 HTML 입력 텍스트 상자에 입력하기 전에 값을 가져올 수 있습니다. 다음은 코드입니다.

function checkText()
{
  console.log("Value Entered which was prevented was - " + event.key);
  
  //Following will prevent displaying value on textbox
  //You need to use your validation functions here and return value true or false.
  return false;
}

<input type="text" placeholder="Enter Value" onkeypress="return checkText()" />

스 니펫 확장

Question 12

이벤트 charCode를 얻은 값에 연결하십시오. 다음은 내 코드 샘플입니다.

<input type="text" name="price" onkeypress="return (cnum(event,this))" maxlength="10">
<p id="demo"></p>

js :

function cnum(event, str) {
    var a = event.charCode;
    var ab = str.value + String.fromCharCode(a);
    document.getElementById('demo').innerHTML = ab;
}

의 값 ab은 입력 필드의 최신 값을 가져옵니다.

Question 13

이를 수행하는 더 좋은 방법이 있습니다. concat 메소드를 사용하십시오. 예

전역 변수를 선언하십시오. 이것은 각도 10에서 잘 작동하며 Vanilla JavaScript에 전달하십시오. 예:

HTML

<input id="edValue" type="text" onKeyPress="edValueKeyPress($event)"><br>
<span id="lblValue">The text box contains: </span>

암호

emptyString = ''

edValueKeyPress ($event){
   this.emptyString = this.emptyString.concat($event.key);
   console.log(this.emptyString);
}