My attempt to enable text selection in an input box upon user click by using the code snippet below was unsuccessful:
<input type="number" onclick="this.setSelectionRange(0, this.value.length)" name="quantity" />
Instead of achieving the desired effect, I encountered the following error message:
Uncaught InvalidStateError: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.
Although this question may be dated, I have come across a clever solution that eliminates the need for the tel input type. By temporarily changing the input type from number to text before making a selection, you can avoid the error and still enjoy all the advantages of using the number input type.
tel input allows for text input, which could cause issues with numerical values.tel does not display the number "spinner" beside the input field (unless specifically desired).function onInputFocus(event) {
const target = event.currentTarget;
target.type = 'text';
target.setSelectionRange(0, target.value.length);
target.type = 'number';
}
A more effective solution is to replace the input type="tel" element.
Using the code snippet below as a guide:
<input type="tel" onclick="this.setSelectionRange(0, this.value.length)" name="quantity" />
This modification will resolve the issue and prevent any error messages from appearing.
Additionally, when viewed on mobile devices, the appropriate number pad will be displayed for user input.
Expanding on Tri Q Tran's answer and making it more versatile, consider the following approach:
const element = document.createElement('input');
element.type = 'number';
(function(originalFn){
element.setSelectionRange = function() {
this.type = 'text';
originalFn.apply(this, arguments);
this.type = 'number';
}
})(element.setSelectionRange);
If you are open to manipulating the prototype, a generic solution can be implemented as follows:
(function(originalFn){
HTMLInputElement.prototype.setSelectionRange = function() {
if ( this.type === 'number' ) {
this.type = 'text';
originalFn.apply(this, arguments);
this.type = 'number';
} else {
originalFn.apply(this, arguments);
}
}
})(HTMLInputElement.prototype.setSelectionRange);
When using type="number", the function setSelectionRange is not supported.
To work around this issue, you can instead use type="text" and add inputmode="numeric". This will display a numeric keyboard for mobile users while still allowing the use of setSelectionRange.
<input
type="text"
inputmode="numeric"
onclick="this.setSelectionRange(0, this.value.length)"
name="quantity" />
As the error message indicates, the function setSelectionRange is not compatible with number inputs. To manipulate the selection through JavaScript, consider using <input type="text"/> instead.
In Chrome, using evt.target.select() will select the content of an input type="number". On touch devices, a similar result can be achieved using an "if" structure.
document.querySelector('.number_input').addEventListener('focus', function (evt) {
evt.target.select();
if ('ontouchstart' in window) {
setTimeout(function() {
evt.target.setSelectionRange(0, 9999);
}, 1);
}
}, true);
However, this conditional statement causes issues with autoselect in Mac Safari. It's a challenge to find a solution that works across both desktop and mobile browsers.
I have successfully implemented a solution in Angular 1.5 by creating a custom directive (see TypeScript example below).
One challenge I encountered was that there is no built-in way to select the entire value of an input with type="number". To overcome this, my strategy involved temporarily changing the input type to text while editing the value, and then reverting it back to the original type upon blur.
This approach may allow users to enter "invalid" data into the field temporarily, but once they finish editing and blur out, the browser's native number validation logic will kick in and prevent any invalid submissions. While there may be some potential pitfalls, this method works effectively in Chrome and Firefox based on our testing.
/// Selects the entire input value on mouse click.
/// Works with number and email input types.
export class SelectOnClick implements ng.IDirective {
require = 'ngModel';
restrict = 'A';
private ogType: any
constructor(private $window: ng.IWindowService) { }
link = (scope: ng.IScope, element: any) => {
element.on('click', () => {
if (!this.$window.getSelection().toString()) {
this.ogType = element[0].type;
element[0].type = 'text';
element[0].setSelectionRange(0, element[0].value.length);
}
})
element.on('blur', () => {
element[0].type = this.ogType;
})
}
static factory(): ng.IDirectiveFactory {
var directive = ($window: ng.IWindowService) => new SelectOnClick($window);
directive['$inject'] = ['$window'];
return directive;
}
}
I have been trying to align the final item on the right side using margin-left: auto. The desired output is achieved in jsfiddle. I am using Visual Studio Code with the same code, but when viewed in Firefox, Chrome, or Edge, the item does not appear on the ...
After updating my jQuery from version 1.10.2 to 3.3.1, I encountered a problem. Whenever I fill in the inputs and click the send button, my website simply reloads and the information from the inputs gets added to the URL of my website. The URL looks like t ...
I have successfully created a responsive register and login using HTML and CSS. Instead of utilizing the standard register form and login provided by Django upon configuration, I want to apply my own custom template. To summarize, while I am familiar with ...
Recently, I delved into the React documentation on lifting state up and found this helpful resource. In one of my projects, I encountered a similar issue with a slight twist. Instead of dealing with <TemperatureInput />, I had to work with <Senso ...
Perhaps the question title is not the most appropriate, but let me explain what I am trying to achieve in my code // First Callback Function connection_db.query(get_measure_query,function(err,user_data1){ if(err){ // throw err; ...
Struggling to align three circular divs on my webpage, here's the code: <div class="row"> <div class="large-9 push-2 columns"> <div class="green"></div> <a href="#">Donnez</a> </div> <div cl ...
The issue with the code snippet below is that the function "window.speechSynthesis.speak(msg)" does not produce any sound output unless the button is clicked first. Only after clicking the button, the "Hello" message works as intended. Any attempts to call ...
I'm having an issue with a standard HTML5 <video> on my website. The videos are working fine on most devices, however there is a problem specifically with the iPad Pro in landscape orientation. It seems to work properly in portrait orientation ...
<div styleName="item" key={index} style={{ backgroundColor: color[index] }}> The hex color code stored in color[index] displays correctly in web browsers, but fails to work in print preview mode. Substituting 'blue' for color[index] succe ...
Do you know of a more efficient way to monitor datetime changes instead of checking every 10 minutes, potentially firing nearly 10 minutes late? Any alternative solutions that I may have overlooked for this issue? ...
Having trouble with my Angular controller that posts to the node server. The function triggering the post is giving me a 404 (Not Found) error when running it. I've tried rewriting the post multiple times but can't seem to locate the issue. If ...
I'm currently developing a Chrome extension with Angular JS. My goal is to retrieve and parse an HTML page from a third-party website. When using Angular JS $resource to achieve this (is there a more effective method?), I encountered an unusual objec ...
Lately, I've been developing a new website geared towards serving as a platform for various travel agencies to showcase their tour packages. The homepage features a functional filter section that enables users to search for offers based on different ...
<div class="panel panel-primary" id="result_panel"> <div class="panel-heading"><h3 class="panel-title">List of Results</h3> </div> <div class="panel-body"> <ul class="list-group"> &l ...
Although I am still relatively new to Angular, I need to make some modifications to a treeview directive that I found on NgModules. The existing code looks promising, but I want to customize it to include the ability to add, delete, or modify items. You c ...
Currently, I am using a straightforward gulp task to compress my CSS and JS files. The task appends a .min extension to the names of the compacted files. Now, I want to make changes in the HTML to direct to these new compressed files, like so: Replace thi ...
Currently, I am delving into the world of web development and experimenting with integrating the COREui 4.0.1 Bootstrap admin template within an existing Symfony 5.3 project instead of utilizing standard Bootstrap 5 components and utilities. My goal is to ...
I recently started working on a React project and I'm trying to incorporate the mui datagrid component. I want to include filters for '>' and '<', but I couldn't find any information in the documentation. Is there a spec ...
I'm currently working on an application using next.js and I am looking to implement code splitting in order to reduce the bundle size and load pages on demand. Unfortunately, I have not been able to find a way to do this without specifying routes. Fo ...
I recently created a competition page for a client, and they have requested that the email sent to customers be more visually appealing than just plain text. The tutorial I followed only included basic text within the 'send body message' section. ...