Click here to Skip to main content
12,251,332 members (51,972 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

33.8K views
2 bookmarked
Posted

Recent value with KeyPress

, 4 Sep 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Select recent value with KeyPress event
Sometimes, we need to check which key was pressed or what exact data was entered in the textbox and then take various actions like show it on other control or block that character.

But the problem with KeyPress event is that when this event occurs, recent entered character is not got in textbox value.

Let me explain this through an example: suppose we entered in textbox ‘H’ then on keypress event control show blank and when we entered ‘I’ then show only ‘H’, it means in Keypress event only show textbox previous entered text with current character.

<asp:TextBox ID="txtName"  onkeypress="showContent()" ClientIDMode="Static" runat="server"></asp:TextBox>
<label id="lblPrview" ></label>
 
<script type="text/javascript">
      function showContent() {
          // assign value using jQuery
          //$('#lblPrview').html($('#txtName').val());
 
          // assign value using js
          document.getElementById('lblPrview').innerHTML = document.getElementById('txtName').value;
      }
  </script>

Solution


In the below JavaScript code, by using String.fromCharCode() method, we get the current entered character.

<asp:TextBox ID="txtName"  onkeypress="showContent(event)" ClientIDMode="Static" runat="server"></asp:TextBox>
<label id="lblPrview" ></label>
 
<script type="text/javascript">
      function showContent(e) {
          var recentChar = String.fromCharCode(e.which);
          //select textbox value using jQuery
          //var ctlValue = $('#txtName').val();
 
          //select textbox value using js
          var ctlValue = document.getElementById('txtName').value;
          var completetext = ctlValue + recentChar;
 
          // assign value using jQuery
          // $('#lblPrview').html(completetext);
 
          // assign value using js
          document.getElementById('lblPrview').innerHTML = completetext;
      }
  </script>

We can manage this functionality with other events like keyup, but this is only related to Keypress events.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Samrat Banerjee
Software Developer (Senior)
India India
Hi, I am Samrat Banerjee from India.
I am a Software Engineer working in .net platform.
I love to explore new technologies.

You may also be interested in...

Comments and Discussions

 
QuestionNot work in every scenario Pin
Ali_MH7-Sep-14 1:11
memberAli_MH7-Sep-14 1:11 
GeneralReason for my vote of 5 It is helpful Pin
patidar.satish8-Sep-11 2:05
memberpatidar.satish8-Sep-11 2:05 
GeneralReason for my vote of 2 See my alternative solution below. Pin
NIRAL SONI5-Sep-11 13:30
memberNIRAL SONI5-Sep-11 13:30 
GeneralHi Samrat its a very nice post But i have a question that if... Pin
adit_sheth4-Sep-11 18:33
memberadit_sheth4-Sep-11 18:33 
GeneralReason for my vote of 5 Very well described and useful post.... Pin
RahulKhadikar4-Sep-11 2:49
memberRahulKhadikar4-Sep-11 2:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160426.1 | Last Updated 4 Sep 2011
Article Copyright 2011 by Samrat Banerjee
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid