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

में विंडोज , के आदेश 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कुंजी जारी की है

एक पाठ नियंत्रण में प्रदर्शित होने वाले पांच वर्ण होंगे: aaaaa

महत्वपूर्ण बिंदु यह है कि आप WM_CHARसंदेश का जवाब देते हैं , जो दोहराता है। अन्यथा आप एक कुंजी दबाए जाने पर घटनाओं को याद करते हैं।

में एचटीएमएल बातें थोड़े अलग हैं:

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/

संपादित करें : कुछ ब्राउज़र (जैसे क्रोम) बैकस्पेस के लिए कीपर घटनाओं को ट्रिगर नहीं करते हैं; कोड में कीप को बदल दिया।

Question 5

इसे कॉम्पैक्ट रखें।
हर बार जब आप एक कुंजी दबाते हैं, तो फ़ंक्शन edValueKeyPress()को कहा जाता है।
आपने उस फ़ंक्शन में कुछ चर भी घोषित किए हैं और आरंभ किए हैं - जो प्रक्रिया को धीमा करते हैं और साथ ही अधिक सीपीयू और मेमोरी की आवश्यकता होती है।
आप सरल प्रतिस्थापन से प्राप्त इस कोड का उपयोग कर सकते हैं।

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अच्छा विचार नहीं है। ऐसी परिस्थितियाँ होती हैं जहाँ कीपैड में कीपैड नहीं होता है!
setTimeout() जब तक उपयोगकर्ता टाइप करना बंद नहीं करता, तब तक Google क्रोम / ब्लिंक वेब ब्राउज़र के तहत स्टाइल सॉल्यूशन में देरी होती है।
माउस और टच इवेंट का उपयोग कट, कॉपी और पेस्ट जैसी क्रियाओं को करने के लिए किया जा सकता है। वे ईवेंट कीबोर्ड ईवेंट को ट्रिगर नहीं करेंगे।
इनपुट विधि के आधार पर, ब्राउजर अधिसूचना को वितरित नहीं कर सकता है कि जब तक उपयोगकर्ता क्षेत्र से दूर नहीं जाता है तब तक तत्व बदल गया है।

एक और अधिक सही समाधान संभाल लेंगे 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/

सभी चार घटनाओं को संभालने से सभी किनारे के मामलों को पकड़ता है। उपयोगकर्ता से इनपुट के साथ काम करते समय, सभी प्रकार के इनपुट तरीकों पर विचार किया जाना चाहिए और क्रॉस-ब्राउज़र और क्रॉस-डिवाइस कार्यक्षमता को सत्यापित किया जाना चाहिए। उपर्युक्त कोड को फ़ायरफ़ॉक्स, एज और क्रोम में डेस्कटॉप पर और साथ ही मेरे पास मोबाइल उपकरणों पर परीक्षण किया गया है।

Question 8

मैं आम तौर पर क्षेत्र के मूल्य (यानी अद्यतन होने से पहले) कुंजी घटना के साथ जुड़े कुंजी से जुड़ा हुआ हूं। निम्नलिखित हाल ही में जेएस का उपयोग करता है इसलिए पुराने IE के समर्थन में समायोजन की आवश्यकता होगी।

जेएस का हालिया उदाहरण

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 जैसी चीजों के लिए कुंजी दबाता है। उपरोक्त कोड पूर्व के लिए समायोजित है, लेकिन बाद के लिए अनुमति देने के लिए और कुछ अन्य घटनाओं के लिए और अधिक छेड़छाड़ की आवश्यकता होगी। इयान बॉयड की टिप्पणी नीचे देखें।]

Question 9

आसान...

अपने कीप्रेस इवेंट हैंडलर में, लिखें

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

आपके द्वारा प्राप्त मूल्य के लिए ईवेंट चारकोड को संक्षिप्त करने का प्रयास करें। यहाँ मेरे कोड का एक नमूना है:

<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

ऐसा करने का एक बेहतर तरीका है। कंकट विधि का उपयोग करें। उदाहरण

एक वैश्विक चर घोषित करें। यह कोणीय 10 पर अच्छा काम करता है, बस इसे वेनिला जावास्क्रिप्ट पर पास करें। उदाहरण:

एचटीएमएल

<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);
}