display a two-character output when a single key is pressed during the keypressup event

Question

display a two-character output when a single key is pressed during the keypressup event

While using the Google virtual keyboard and setting it on a textarea, I noticed an issue. When I type something in the textarea, two characters are printed - one uppercase and one lowercase.

To address this problem, I wrote a JavaScript function for the textarea. This function automatically capitalizes the letters after a dot "." is typed.

Now, I am trying to figure out how to remove one character so that only one character is printed in the textarea. Currently, every time I press a single key, two characters are printed. I have set up a keypress event on the textarea to handle this function.

function caps(e, textarea, value){
    var unicode = e.keyCode ? e.keyCode : e.charCode;
    var str = value.trim();
    str = str.charAt(str.length - 1);

    if((str == "." || value.length == 0) && (unicode >= 97 && unicode <= 122)){
        textarea.value = textarea.value + String.fromCharCode(unicode).toUpperCase();
        return false;
    }
    return true;
}

javascript jsp

Answer 1

Answer №1

If you want to prevent the default behavior of an event, you can achieve this by using e.preventDefault();. Here is an example:

function capitalizeLetter(e, textarea, value){
    var unicode = e.keyCode ? e.keyCode : e.charCode; // handling ASCII codes

    var str = value.trim();
    str = str.charAt(str.length-1);
    if(str == "." || value.length == 0){
        textarea.value = textarea.value + String.fromCharCode(unicode).toUpperCase();
        e.preventDefault();
    }
}

input.addEventListener("keypress", function(e){
    if(e.keyCode == 8) return true;
    capitalizeLetter(e, input, input.value);

}, false)

Instead of using return false, you can modify the code like this:

input.onkeypress = function(){
    if(e.keyCode == 8) return true;
    return capitalizeLetter(e, input, input.value); // passing false as well from capitalizeLetter
}

Check out the Demo for a better understanding.

Answer 2

If you want to prevent the default behavior of an event, you can achieve this by using e.preventDefault();. Here is an example:

function capitalizeLetter(e, textarea, value){
    var unicode = e.keyCode ? e.keyCode : e.charCode; // handling ASCII codes

    var str = value.trim();
    str = str.charAt(str.length-1);
    if(str == "." || value.length == 0){
        textarea.value = textarea.value + String.fromCharCode(unicode).toUpperCase();
        e.preventDefault();
    }
}

input.addEventListener("keypress", function(e){
    if(e.keyCode == 8) return true;
    capitalizeLetter(e, input, input.value);

}, false)

Instead of using return false, you can modify the code like this:

input.onkeypress = function(){
    if(e.keyCode == 8) return true;
    return capitalizeLetter(e, input, input.value); // passing false as well from capitalizeLetter
}

Check out the Demo for a better understanding.

Answer 3

Answer №2

It appears that the solution lies in simply removing the last character before adding a new one. Here is a possible implementation, although it has not been tested thoroughly.

if((str=="." || value.length==0) && (unicode>=97 && unicode<=122)){
    /*Remove the previous character before adding a new one*/
    textarea.value = textarea.value.substring(0, textarea.value.length - 1);
    textarea.value=textarea.value+String.fromCharCode(unicode).toUpperCase();
    return false;
}

Depending on how this function is triggered, you might be able to prevent the character from being printed initially.

Upon further reflection, I noticed that you mentioned it's the keypress event in the question title. In that case, utilizing e.preventDefault would be beneficial, as demonstrated in another response. Simply replace your return false with this method.

Answer 4

It appears that the solution lies in simply removing the last character before adding a new one. Here is a possible implementation, although it has not been tested thoroughly.

if((str=="." || value.length==0) && (unicode>=97 && unicode<=122)){
    /*Remove the previous character before adding a new one*/
    textarea.value = textarea.value.substring(0, textarea.value.length - 1);
    textarea.value=textarea.value+String.fromCharCode(unicode).toUpperCase();
    return false;
}

Depending on how this function is triggered, you might be able to prevent the character from being printed initially.

Upon further reflection, I noticed that you mentioned it's the keypress event in the question title. In that case, utilizing e.preventDefault would be beneficial, as demonstrated in another response. Simply replace your return false with this method.

display a two-character output when a single key is pressed during the keypressup event

Answer №1

Answer №2

Similar questions

What is the correct way to invoke a function from an external JavaScript file using TypeScript?

How can I ensure that all row checkboxes are automatically marked as checked upon loading the Material Table in ReactJS?

Resetting the countdown timer is triggered when moving to a new page

gulp.watch executes tasks without following a specific sequence

I am encountering the error message "Utils is not defined" while attempting to generate a chart using chart.js

Dealing with ReactJs Unhandled Promise Rejection: SyntaxError - Here's the Solution

Creating an innovative Angular2 / Electron hybrid app that seamlessly integrates Electron API functionalities directly into the Angular2 TypeScript

Creating a custom Angular HTTP interceptor to handle authentication headers

How can I post data in React/Redux while adhering to a JSON API format?

react-router version 2.0 fails to direct traffic

White border appears when hovering over MUI TextField

NodeJS loop issue with variable scoping in the context of express and mongoose

Utilizing Three.js with interactive functionalities and advanced transformation controls

Accessing the URL causes malfunctioning of the dynamic routing in Angular 2

Incorporating Ruby on Rails tag within JavaScript

Comparing OLOO and OO in ReactJS for front-end web development

The initial transition in offcanvas on bootstrap 5 is not appearing when a placement is dynamically added

What is the best way to merge setInterval with mouseenter events?

Master the art of utilizing angular-filter

Grunt is throwing an error message of "Cannot GET/", and unfortunately ModRewrite is not functioning properly