How to Get Text of an Input Text Box During Onkeypress

How to get text of an input text box during onKeyPress?

Handling the input event is a consistent solution: it is supported for textarea and input elements in all contemporary browsers and it fires exactly when you need it:

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>

Get the final text of a textbox on `keypress` if the click event is allowed to go through

The answer, for future readers, is to use e.target.selectionStart. That allows you to find where the user made the key press and allows you to build up what the final string would be if the input is allowed to be entered.

const newChar = String.fromCharCode(e.keyCode);
const cursorPos = e.target.selectionStart;
const inputText = e.target.value;

const proposedNewText = `${inputText.slice(0, cursorPos)}${newChar}${inputText.slice(cursorPos, inputText.length)}`;

It's worth noting that this can get more complicated if the user has selected a range of text (i.e. a textbox with 5 characters in it and the users clicks and drags to select the 2nd -> 5th character) and then types. In that case, you'll have to get both the start and end cursor position (e.target.selectionStart and e.target.selectionEnd) and .splice() the string, adding in the user's new character.

You've then got the issue that by changing the value of the input (using e.target.value = newText) that the cursor will automatically jump to the end of the text. There's a lot to consider depending on your use case.

Hopefully this helps point someone in the right direction.

Dynamically get value of input tag onkeypress in jquery

you need to use INPUT event. it's fire when user change in text box any time. I hope it helps you.

$(function () {    var v = "";    $("#upload").on('input', function () {        v = $(this).val();        console.log("value = " + v);    });})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="text"  name="amount" placeholder="Enter Your Amount" id="upload" />

Javascript - get value from textbox at every keypress

keypress happens before the change, yes. keyup happens after. Listen to that instead.

jquery keypress() event get text

You can try to use the keyup event:

$(selector).keyup(function() {
  var textValue = $(this).val();
  DoX();
});

Getting values from multiple text boxes on keypress in javascript

You can get SUM of all inputs that have form-control class on keyup event like this:

$('input.form-control').on('keyup',function() {       var total = 0;    $('input.form-control').each(function(){        if (this.value == ''){            total += parseInt(0);        }else{            total += parseInt(this.value);        }    });    $('#total').val(total);});

input {   display: block;   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="text" name="txtcustomduty" class="form-control" placeholder="Customs Duty" ><input type="text"  name="txtlcltranspotation" class="form-control" placeholder="Local Transportation" ><input type="text"  name="other" class="form-control" placeholder="other" >
Total extra cost: <input id="total" >

How can I get the NEW value of an HTML text input during a keypress event via jQuery?

It's possible to work out what the value will be after the keypress. It's easy in non-IE browsers and trickier in IE, but the following will do it:

document.getElementById("your_input").onkeypress = function(evt) {
    var val = this.value;
    evt = evt || window.event;
    var charCode = typeof evt.which == "number" ? evt.which : evt.keyCode;
    if (charCode) {
        var keyChar = String.fromCharCode(charCode);
        var start, end;
        if (typeof this.selectionStart == "number" && typeof this.selectionEnd == "number") {
            start = this.selectionStart;
            end = this.selectionEnd;
        } else if (document.selection && document.selection.createRange) {
            // For IE up to version 8
            var selectionRange = document.selection.createRange();
            var textInputRange = this.createTextRange();
            var precedingRange = this.createTextRange();
            var bookmark = selectionRange.getBookmark();
            textInputRange.moveToBookmark(bookmark);
            precedingRange.setEndPoint("EndToStart", textInputRange);
            start = precedingRange.text.length;
            end = start + selectionRange.text.length;
        }
        var newValue = val.slice(0, start) + keyChar + val.slice(end);
        alert(newValue);
    }
};

---

Related Topics