The onkeyup event is not registering in the program within asp.net

I've scoured countless forums, including this one, for information on the onkeyup event, and I've tried everything but nothing seems to work:

Here is my JavaScript code:

<script type="text/javascript">
    function Count() {
        var i = document.getElementById('txtOr').value.length;
        document.getElementById('lblRem').innerHTML = 20 - i; 
    }
</script>

And here is my aspx code:

<asp:TextBox ID="txtOr" runat="server" Font-Size="X-Large"  Height="700px" Width="100%" TextMode="MultiLine"  OnTextChanged="txtOr_TextChanged" ClientIDMode="Static" onkeyup="Count()"></asp:TextBox>
<asp:Label Text="20" runat="server" ID="lblRem" style="font-size:20px"/>

I've attempted every method I could find online:

  • In the C# Page_Load method, adding 

    txtOr.Attributes.Add("onkeyup","Count()")
    [didn't work]

  • In the JS code, trying this: 

    function Count() {var i = document.getElementById("<%=txtOr.ClientID%>").value.length; document.getElementById('lblRem').innerHTML = 20 - i; }

[still didn't work]

Does anyone have a solution?

javascriptc#asp.nettextboxonkeyup

Answer №1

Dealing with JavaScript can be challenging because of the sensitivity to upper and lower case.

Make sure to pay close attention to the "case" settings of onKeyUp in this code snippet.

OnKeyup - wrong!
onkeyup - wrong!
Onkeyup - wrong!
ONKEYUP - wrong!

OnKeyUp - correct!!

Note ALSO that you must pass "event" (and again that "event" matters)


        <asp:TextBox ID="TextBox1" runat="server" 
            Height="191px" TextMode="MultiLine" Width="422px"
            OnKeyUp="mykeypress(event);return false;"
            ClientIDMode="Static"></asp:TextBox>
        <br />
       <script>

            function mykeypress(e) {

                console.log('key press value = ' + e.keyCode);
                if (e.keyCode == 13) {

                    alert('you hit the enter key!');
                    // ' get value of text in text box
                    var mytbox = document.getElementById('TextBox1');
                    alert(mytbox.value);

                    // get text box WITHOUT CientIDMode=Static

                    var mytbox2 = document.getElementById('<%= TextBox1.ClientID %>');
                    alert(mytbox2.value);
                }
            }
        </script>

Given that asp.net pre-processor has the capability to alter ID values of controls on the page, it is recommended to use the second approach provided in the code snippet for referencing controls or set ClientIDMode to "Static". This can be particularly useful when working with jQuery pop up boxes or divs where consistent IDs are needed.

Additionally, when using OnKeyUp="somefunc(event);" be sure not to overlook the "event" parameter, as it is essential for the functionality.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript variable not refreshing its value after submitting an HTML form

In my HTML form, I have 8 textboxes enclosed in div tags with IDs ranging from fa1 to fa8. By default, two of the textboxes are visible while the remaining six are hidden. To toggle the visibility of these divs, I've implemented two buttons - addfa an ...

javascriptphpjqueryhtml

How Web Components interact with innerHTML within connectedCallBack

class Form extends HTMLElement { constructor() { super() } connectedCallback() { console.log(this) console.log(this.innerHTML) } } customElements.define("my-form", Form); I'm currently faci ...

javascripthtmlweb-component

Is there a way to retrieve specific data based on an autonumbered ID using a SQL select query?

CHALLENGE: Is there a way to retrieve the specific autonumber id? ID DESCRIPTION CLASS 1 test1 a 2 test2 b 3 test3 a 4 test4 a 5 test5 b The id is generated through auto-increment in SQL Server. Her ...

c#asp.netsql-server

I need help figuring out how to retrieve the full path of an uploaded file in JavaScript. Currently, it only returns "c:fakepath" but I need

Is there a way to obtain the complete file path of an uploaded file in javascript? Currently, it only shows c:\fakepath. The file path is being directly sent to the controller through jquery, and I need the full path for my servlet. Are there any alte ...

javajavascriptjquery

Issue with form submission

I'm experiencing an issue with a form on my website where users can share an email. The form is supposed to pop up and allow users to send an automated subject and message to a friend. However, when I try to submit the form, the browser displays a 404 ...

phpjavascriptforms

Leverage the compatibility of AngularJS with List and Dictionary return types using ServiceStack

AngularJS encounters issues with binding to a value type model, as detailed in the following sources: Link One Link Two My server only provides a list of strings: [Route("/path/{Id}", "GET, OPTIONS")] public class MyModel { public int Id { get; set ...

c#jsonrestangularjsservicestack

Troubleshooting: Javascript success callback not executing upon form submission

A snippet of my JavaScript looks like this: $(document).ready(function(){ $("#message").hide(); $("#please_wait_box").hide(); $("#updateinvoice").submit(function(e){ $("#message").hide(); ...

javascriptphpjqueryhtml

Is there a way to show the keyboard on Chrome for Android without displaying the address bar?

One of the key features of Chrome on Android is that the address bar disappears when scrolling, allowing for more screen space. However, when you click on a text input field and the keyboard pops up, the address bar reappears. It seems like Google intenti ...

javascriptandroidcssgoogle-chrome

You may encounter issues with invoking methods on a JavaScript object in Node.js after using res.send for response sending

Exploring Context and Design Overview Currently, I am utilizing a library known as Tiff.js to seamlessly load Tiff images on a designated webpage. The usage of this library extends both to the server-side and client-side functionalities. On the server end ...

javascriptangularjsnode.jsexpress

Can anyone provide guidance on how to make a cross domain SOAP request in JavaScript or jQuery?

Similar Inquiry: is it feasible to acquire cross domain SOAP request using jquery I am seeking assistance on retrieving a SOAP response from a separate domain and then parsing it to exhibit information on my website. I do not possess access to the dif ...

javascriptjquerysoap

The method Array.find, along with other similar methods, does not automatically return a value of `undefined`

Why does TypeScript in my NestJS environment only infer the return type of Array.prototype.find as T, instead of T | undefined as specified? Is there a way to make TypeScript automatically recognize that find should return T | undefined? ...

javascriptarraystypescript

I've exhausted all my knowledge but still unable to get Tailwind to work

I've been troubleshooting Tailwind for the past 6 hours. Managed to set it up in a simpler Nextjs/React/Typescript project, but struggling to get it working in this larger codebase. I'm sure I'm missing something obvious, but I'm at a ...

javascriptcssreactjstailwind-css

Utilizing Spaces in Parameters for discord.js

My current challenge involves sending tweets from discord.js. However, I encountered an issue where messages with spaces are being posted as "hello,from,discord" instead of "hello from discord". Can anyone help me rectify this? const Twitter = require(&apo ...

javascriptnode.jsdiscorddiscord.js

What is the best way to generate a fresh object using an existing object in Javascript?

Struggling with generating a new object from the response obtained from an ajax call in JavaScript app. The data received is an array of objects, shown below: { "items": [ { "id": "02egnc0eo7qk53e9nh7igq6d48", "summary": "Learn to swim ...

javascriptjson

Issues with retrieving $_POST values from a select form in PHP

When the button is clicked, I am sending a AJAX request to my PHP page using POST method with the selected data from a SELECT element. However, I am facing an issue where my PHP IF statements are not evaluating as true. It always defaults to the ELSE condi ...

javascriptphpjqueryhtmlajax

The functionality of angular ng-show/ng-hide is not functioning properly when used in conjunction with ng-bind-html

I am having an issue with setting ng-show or ng-hide for my elements in an HTML string and passing it to the view using ng-bind-html. Unfortunately, the ng-show/ng-hide functionality is not working as expected and my element is always visible. Below is my ...

javascripthtmlangularjsangularjs-directiveangularjs-scope

Boosting Website Loading Time with Puppeteer: A Guide

Currently, I am using Puppeteer for automating tasks and it is working well. However, I have noticed that when loading the website, it takes longer than my usual websites. I attempted to use caching with the following code: const puppeteer = require(' ...

javascriptnode.jscachingautomationpuppeteer

Implementing dynamic tab switching using Ajax and jQuery to add active classes

I am currently working on creating ajax-based tabs by loading specific divs within each tab. In order to achieve this, I need to dynamically add an active class to identify which tab is open at any given time. Unlike bootstrap tabs, the difference here lie ...

javascriptjqueryajaxbootstrap-4tabs

What is the best way to reposition the caret within an <input type="number"> element?

How can I make the caret move when an input is clicked? The code I found works with text, but not with number. Also, is there a way to pass the length without specifying a value (e.g. 55) in the parameters? HTML <input type="number" name="cost" value= ...

javascriptjqueryhtml

Introducing the serverRuntime tag in the webconfig results in a 500.19 error

After downloading an asp.net project from TFS onto my other laptop, I encountered difficulties running it. Upon further investigation, the issue seems to be related to the webconfig setting: <serverRuntime uploadReadAheadSize="128000000" /> ...

asp.net.netwindows-7iis-7.5