Angular directive compatibility with Mozilla Firefox

I've encountered a strange issue with my directive in Firefox. The directive is designed to limit user input, and it functions correctly in Chrome. However, in Firefox, once the user reaches the input limit, they are unable to delete any characters - the backspace key seems to be locked and no keys work at all. For instance, if a user tries to input more than 999, the keyboard locks in Chrome but allows for deletion. In contrast, Firefox does not allow for deletion or input of any number. Any suggestions?

.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            angular.element(elem).on("keypress", function() {
                if (this.value.length == limit){
                    return false;
                }
            });
        }
    };
}]);

Element :

 input limit-to="3" type="number" name="performance" class="typo-xl-l input-power">
javascriptangularjs

Answer №1

It is my belief that utilizing event.preventDefault() is more effective than simply using return false in your event handler.. Additionally, you can verify specific key codes (e.g., backspace is 8);

.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);

            //backspace, up arrow, down arrow, delete... gets complicated quickly. 
            // you'll probably want more than these
            var allowedKeys = [8, 38, 40, 46];

            angular.element(elem).on("keypress", function(event) {
                var key = event.which || event.keyCode;
                if (this.value.length === limit && allowedKeys.indexOf(key) < 0 ){
                    event.preventDefault();
                }
            });
        }
    };
  }]);

A fiddle @ http://jsfiddle.net/o6gcyLjk/18/

In addition to using the min and max properties on the input control to limit the number range, keep in mind that users can still copy & paste to input data in an unwanted state.

My recommendation would lean towards avoiding this method in general and opting for validation instead, notifying the user of any invalid input rather than overly restricting them..

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

Navigating the intricacies of retrieving network errors within an AngularJS application requires a deep

I've encountered the following code snippet in abcd.js: $http({url: 'some url' , method: 'POST', data: , headers: {} }).then(function(response)) { ............. }, function error(response) { .............. }) When an error occurs ...

javascriptphpangularjs

Merge the throw new Error statement with await in a single expression

Is it possible to combine throwing an error and using the await keyword in one statement using the AND operator? The code snippet below demonstrates my intention: throw new Error() && await client.end(). So far, this approach has been working wel ...

javascriptpostgresqlerror-handlingasync-awaittry-catch

Icon for TypeScript absent from npm package listings

Recently, I created a package and uploaded it to the npm repository. The package was displayed with an icon labeled "ts" on the website. https://i.stack.imgur.com/LoY1x.png The accompanying package.json showcased the inclusion of the "ts" icon - https:// ...

javascriptnode.jstypescriptnpm

The domain retrieval is contingent on the language preference of the user

A task has been assigned to create a script in JavaScript/jQuery (or other suitable technologies) that will return a domain with a .pl extension if the user's browser language is set to Polish. Otherwise, the script should return a .eu domain extensio ...

javascriptjquery

To close the Muix DateTimePicker, simply hit the Escape key or click anywhere outside of the picker

I'd like the DateTimePicker to only close when the user presses the action buttons, not when they click outside or press Escape. Unfortunately, I haven't found any props to control this behavior yet. <DesktopDatePicker closeOnSelect={false} s ...

javascripttypescriptmui-xmui-x-date-picker

Discover the nearest class and smoothly expand it with the slideDown function in jQuery

Hey there, I'm working on implementing a "View More" button on my page. The button will reveal another unordered list that currently has the class of "hidden-list". When the user clicks on "View More", I want it to slideToggle the hidden-list element ...

javascriptjqueryhtmlcss

Pausing and then resuming an interval function within the same function

I'm struggling with an $interval function that runs every second. The function retrieves user credentials from local storage and checks if they have expired. If they have, it refreshes them with new ones. Otherwise, it does nothing. This is what my ...

javascriptangularjstimer

What is the best method for transferring a string from JavaScript to a JSON file?

Is there a way to update the value of "JSValue" in my JSON (JSValue) using JavaScript? Specifically, how can I assign JSValue to a variable called Value using JavaScript? JavaScript var Value = 1 + 1 JSON { "DATA": [ { "JSValue": "0" } ...

javascriptjson

Vue.js: Attaching a function to a Template

I am struggling to find a way to bind my screen height to a calculated value in my code. Unfortunately, the current implementation is not working as expected. I would greatly appreciate any guidance on how to resolve this issue. <template> <b ...

javascriptvue.jsvuejs2

What is the process for adding JSON data to a dropdown menu using PHP AJAX?

I am trying to populate a select html element with data from a list of JSON results. Here is the code I have attempted: JSON output: jquery loop on Json data using $.each {"Eua":"Eua","Ha'apai":"Ha'apai",& ...

javascriptajax

Enhancing your website's design with dynamic CSS variables using JavaScript

Is there a way to update CSS variables specifically scoped under a certain CSS class (or even other complex CSS selectors) that are predefined in a stylesheet? This question extends beyond just CSS variables and includes other CSS properties as well, quest ...

javascripthtmlcssdomcss-variables

Ways to resolve issues related to null type checking in TypeScript

I am encountering an issue with a property that can be null in my code. Even though I check for the value not being null and being an array before adding a new value to it, the type checker still considers the value as potentially null. Can anyone shed lig ...

javascripttypescripttypesnull

What is the name of the file that contains a class?

I am curious about identifying the file that called a specific class: database.ts class Database { constructor() { console.log(`I want to know who called this class`); } } server.ts import Database from 'database.ts'; new Databa ...

javascripttypescriptclassoop

Use JavaScript to convert only the initial letter to uppercase

Once again, I am in the process of learning! Apologies for the simple questions, but learning is key... Attempting to implement a trick I found online to change all letters to uppercase, I am now trying to adjust it to only capitalize the first letters. T ...

javascripthtmlcss

Tips for selecting a JSON data node on-the-fly using jQuery

This is an example of my ajax function: $.ajax({ type: "GET", dataType: "json", async: false, url: "/wp-content/comment_data.php", data: 'songid=' + $array, success: function(data){ oTable.find('td').eac ...

javascriptjquery

Angular JS: the output of the initial resolution will not be transferred to the subsequent resolution

I can't wrap my head around why I keep getting an Unknown Provider error with the code below "geonameProvider <- geoname <- country" var cacRouteViewMod = angular.module('cacRouteViewMod', ['ngRoute', 'cacLib'] ...

angularjsroutesresolve

At all times, AJAX/PHP/JS will have a readyState of 1 and a Status of 0, with no text response

Recently, I've been attempting to utilize a sample of AJAX to compare form data with an SQL database from a domain at http://www.example.com. However, I'm encountering persistent issues where the readyState remains at 1 and the Status is always 0 ...

javascriptphpajax

Rotating an animated object in ThreeJs: A simple guide

I have modeled a spaceship in Blender, added some random wobbling and rotation animations to it, and then exported the 3D model to ThreeJs. When the user presses the LEFT ARROW key, I want the spaceship to rotate to the left on the X-Y plane, and similarl ...

javascriptanimationthree.js3drotation

parallelLimit asynchronously executes in limited quantities once

Utilizing async.parallelLimit to update database records in batches of 10 that total 1000 each time is my current challenge. I am exploring how to implement this feature in my code but have run into some issues. Despite studying example interpretations, my ...

javascriptnode.jsparallel-processingbatch-processingasync.js

Developing a Multi-Faceted Array Utilizing SQL Data

The requirement of the plugin I am using is to provide it with an array structure in JavaScript that looks like this: var data = [ { "id": 1, "name": "University1", "list": [ {"id": 1, "name": "Dorms", "list": ...

javascriptphpjquerysqlarrays