Click here to Skip to main content
Click here to Skip to main content

Tagged as

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) Viscus Infotech Ltd. [India]
India India
Hi, I am Samrat Banerjee from India.
I am a Software Engineer working in .net platform.
I love to explore new technologies.

Comments and Discussions

 
QuestionNot work in every scenario PinmemberAli_MH7-Sep-14 2:11 
GeneralReason for my vote of 5 It is helpful Pinmemberpatidar.satish8-Sep-11 3:05 
GeneralReason for my vote of 2 See my alternative solution below. PinmemberNIRAL SONI5-Sep-11 14:30 
GeneralHi Samrat its a very nice post But i have a question that if... Pinmemberadit_sheth4-Sep-11 19:33 
GeneralReason for my vote of 5 Very well described and useful post.... PinmemberRahulKhadikar4-Sep-11 3:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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
Web04 | 2.8.150327.1 | Last Updated 4 Sep 2011
Article Copyright 2011 by Samrat Banerjee
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid