783 questions
0
votes
0
answers
51
views
IOS 17 camera capture not working in Next.js with <input type="file" capture>
Good day everyone,
I'm working on a Next.js project where I need to allow users to upload images using their device's camera. Here's the relevant snippet:
import { Loader2, Camera } from "lucide-...
- 292
7
votes
5
answers
299
views
How to filter user input in Angular?
I want to filter user input when they type in an HTML text input.
I can do that in native HTML/JavaScript as shown in the following demo:
<form>
<label for="tracking">...
- 3,064
0
votes
2
answers
391
views
React form validation for Zipcode when input type is number
I am working on a simple customer intake form, and as part of the validation I need to make sure that a proper zipcode has been included. I know regex would be the easiest way to solve this issue, but ...
1
vote
1
answer
107
views
How to change text spacing in HTML time inputs?
I am making a time range selector, and using Bootstrap. It needs to be a specific fixed with so that it can fit with the other components. I've noticed that Firefox renders the text of a type="...
- 34.6k
1
vote
1
answer
85
views
How to Set Default Directory, Restrict Folder Access, and Enforce File Type Validation in <input type="file">?
I'm working on a file upload feature in an Angular project where users can upload specific files using an <input type="file"> element.
These are the html and css code snippets of the ...
0
votes
1
answer
40
views
html input slider jumps to middle when value is NaN
I'm using the slider in a react app and modifying the value like so
<input
type="range"
className="frame-slider"
min="0"
value={currentValue.toString()}...
- 133
1
vote
3
answers
288
views
How can I attach an addEventListener to an input field using the submit event?
I am making a simple tip calculator and first of all I am trying to save the value of the bill amount which the user can type into the input field (this input field has a type number attribute). There ...
1
vote
1
answer
65
views
How can I pass a input field value from an exported component in react js
I am not able to get value in an input field from a custom component.
dateFormat.jsx
import React from "react";
const DateFormat = ({ seconds, nanoseconds, format }) => {
const dates = ...
0
votes
1
answer
40
views
How can I remove the default arrow from the list input and add a new arrow using pure html and css? [duplicate]
I want to remove the default arrow appearing in the list input field. is there anyone please who can help me and show me a way to add a new arrow in place of the default arrow here?
<body>
&...
2
votes
0
answers
183
views
HTMLInputElement maxLength property has an invalid default value
We're developing a web component library. We're using ShadowDOM and inside that, native HTMLInputElement instances. Since we're aiming to widely be compatible with native inputs, we're mirroring the ...
- 57.2k
2
votes
0
answers
152
views
Safari issues with input type=email and multiple attribute
In my experience, when viewing an HTML input field of type "email" with the "multiple" attribute present, Safari shows a blank input, whereas Chrome and FF show the field as ...
- 31
0
votes
1
answer
438
views
How to use HTML5 input pattern attribute to validate Latin and extended Latin characters only
I am working on a web form where users are required to input text that should only contain Latin characters, including extended Latin characters (such as ñ, é, ü, etc.), but should exclude any non-...
- 634
-1
votes
1
answer
85
views
Javascript: how do I get the value of an input in real time? [closed]
I am programming a web page and I have an input where the user must enter a 5-letter word and a button that will use said word for a function, I want the button to be disabled as long as 5 letters ...
0
votes
1
answer
55
views
How can I make OnChange and OnKeyDown work well together?
So I am making a weather app that connects to OpenWeather api and want certain functionality with the search input element I'm using. I want to get the user input after the user presses the enter key. ...
-1
votes
2
answers
48
views
Unable to add decimal in input type even after adding step
I have HTML input which is set to be a numeric input including the up and down carets. To my surprise I am unable to enter any decimal numbers.
<input type="number" />
It does not ...
- 1,904
0
votes
2
answers
67
views
Load uploaded video into html
I want the user to be able to upload a video and then, by clicking a button, load the video into a tag to view.
Here is an example:
HTML:
function loadvideo() { video = document....
user22871601
2
votes
2
answers
120
views
Alert box not displaying Sum with Html Input Fields
New to website programming. I'm trying to make a basic sum equation with 2 input fields taken from client-side.
<!DOCTYPE html>
<html>
<head>
</head>
<body&...
- 23
12
votes
5
answers
12k
views
HTML input type="file" not working to pull up camera for Pixel / android 14 combination
I posted this in the react-native-webview discussion thread in GitHub in case this is something they need to add support for, but wanted to see if anyone had any thoughts here:
Disclaimer: I'm a web ...
- 121
3
votes
0
answers
256
views
Android WebView translation missing in date and time picker for HTML input type date and time
When I use HTML input type time or date in an Android WebView, then the translation for set and clear is missing in the date and time picker.
In this example I'm using Dutch as language.
Sample ...
- 333
1
vote
1
answer
199
views
How do I set the starting value of a time picker, only when it gets focus?
I have a time picker:
<input type="time" name="appt-time">
I want to keep it empty until the user starts selecting a time. Only when the user clicks the element and the popup ...
- 399
0
votes
1
answer
121
views
mwc-textfield input pattern not working for backslash or vertical bar
I am trying to add a pattern to a mwc-textfield input to filter a file name. My pattern seems to be valid js regex and seems to work on a html input but does not as a pattern on a mwc-textfield. I ...
- 59
1
vote
0
answers
578
views
How can I disable any day in an HTML input where the date is selected?
I have a page in React where I use browser input. How can I block any calendar day I specify in the relevant input?
<input type="date" id="start" name="trip-start" ...
- 11
0
votes
1
answer
167
views
How to force JS input's 'change' event when value was retyped but not changed?
I know there are a lot of similar questions, but I haven't found exactly my case.
Using vanilla JS there is an input control in which a user types something. A date as an example (but could be a phone ...
1
vote
1
answer
115
views
Why does `<input pattern="^[^ ]{2,}.*[^ ]$">` trigger "XPath processing error: Binary operator expected"?
I have am XML file with XSL to process it.
That works fine using an input element like <input pattern="^[^ ].*[^ ]$">.
However when I changed it to <input pattern="^[^ ]{2,}.*[^...
- 4,730
0
votes
0
answers
30
views
HTML/JavaScript: Execute form submit checks on button-press; is it possible in an elegant way? [duplicate]
I wrote an input form that has input elements with the required attribute set.
So when pressing an <input type="submit" /> button, empty fields (and other violations) are complained ...
- 4,730
2
votes
0
answers
190
views
Suppress autocorrect on HTML input Safari iOS
I have this search input but no matter which of these attributes I add, or whether it's off or false I still get the autocorrect bubble on Safari. type="search" doesn't help either, nor does ...
- 88
0
votes
2
answers
302
views
Change the color of an element when text is typed in input?
I'm looking for a way to change the style of an element, (like the <body>) when not just text, but specific number like "5214" or something is entered in an <input>. With my ...
0
votes
1
answer
833
views
Can someone make this Angular 16 checkbox input code more efficient and cleaner?
I have a simple boolean in my angular 16 ts component uploadEnabled. What I want is the checkbox to be checked if uploadEnabled is true and vice versa. When I click on the checkbox I want ...
- 2,475
0
votes
1
answer
308
views
Prevent Duplicate File Uploads via Javascript
I'm trying to combine two concepts. This code works...
HTML
<input type="file" name="files" multiple>
<ul id="file_list">
<ul id="...
- 1,089
0
votes
0
answers
33
views
Validation of Names with HTML-Input pattern [duplicate]
im relatively new to WebDevelopment. Basically, I have an application where I want to allow only alphabetical letter a-z and A-Z and the – special character for double names like Marry-Jane in the “...
1
vote
1
answer
108
views
HTML input field width varies with content using only CSS (no JS)
I can set the width of an <input type=number> field with CSS width = 6em; or width = 100%, but those only set a fixed width or a width that varies with the container. I want the width to depend ...
- 52.8k
2
votes
2
answers
205
views
How can I increment a number input?
When using HTML input elements I tried implementing the step attribute. This allowed me to add 100 to the current value by clicking the up/down arrows in the input field.
However, step determines ...
- 133
1
vote
2
answers
755
views
What do input min and max actually do?
I was expecting min and max for <input> to limit the selectable options to the range in between the two values. They do in <input type="number">, for example. But with type="...
- 45
9
votes
2
answers
28k
views
How to style HTML file input using Tailwind CSS?
When I encountered this issue it took me about 20 minutes to find the answer in an article here: https://www.kindacode.com/snippet/how-to-style-file-inputs-with-tailwind-css/
I had scrolled though ...
- 281
17
votes
2
answers
10k
views
Why is my regex valid with the RegExp u flag, but not with the v flag and does not work in HTML pattern attribute?
I am getting the below console warning for this regex pattern:
^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+\\.[a-zA-Z0-9]+$
Pattern attribute value ^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$ is valid with the ...
- 199
2
votes
0
answers
29
views
How do I define the TypeScript of onBeforeInputCapture in input element(React)? [duplicate]
I use onBeforeInputCapture to get value when I copy and paste a string to an input JSX element.My purpose is to detect the modification in the input value.
I set its type to e:FormEvent, and try to ...
- 19
0
votes
2
answers
560
views
Visual bug when input is autofilled
I have an html form with a bunch of inputs. When an input gets autofilled by Safari and I then attempt to edit the input there is a weird overlapping of the string.
If I click around it seems to fix ...
- 43
1
vote
1
answer
81
views
Why is my jQuery event listener not running upon app startup?
I'm working on making a script that detects if a checkbox with id "chapterex" is checked, and updates the page accordingly if it is: if it is not checked, add the multiple attribute to the ...
- 13
2
votes
0
answers
132
views
Get partially filled HTMLInputElement date value
I've added support to my database for partial date strings, since YYYY-MM is a valid ISO date, however I've noticed that HTML's input element will always return an empty string if the day isn't ...
- 4,510
0
votes
2
answers
603
views
Proper way to listen for selectionStart and selectionEnd in HTML text inputs to handle leftward dragging of mouse, with knockout
I am listening for selectionStart and selectionEnd with knockout and it's working fine when the user clicks with the mouse and drags rightward to create the selection. But if the user clicks in the ...
- 8,990
12
votes
6
answers
3k
views
How to create a scientific HTML slider with input type="range"
I need to create a scientific input slider. More precisely:
n ticks, example: no matter the range (0 - 200, 1 - 11, etc.), I want 11 ticks covering the whole range
the number value label below each ...
- 47.5k
-1
votes
1
answer
821
views
create html input for mathematical expression
I need to know how can i create an input text in HTML for a mathematical formula like the one in geogebra.org/classic
- 11
1
vote
2
answers
2k
views
The specified value does not conform to the required format, "yyyy-MM-dd"
I have implemented this solution to my school project
However I get this error from the console whenever I attempt to change the value of the initial date field
The specified value "2/21/2023&...
- 29
0
votes
1
answer
312
views
How to update Array value in Service using Input from child component?
I am trying to update the value of an Array in my service from child component.
Here is the service at the top level of application
feature.service.ts
export class FeatureService {
private ...
- 187
1
vote
0
answers
231
views
Websites don't detect filled in password?
I have been wondering (and checked the Bitwarden chrome extension source code but couldn't figure out): how do password managers fill in your passwords?
What I'm trying to say is: some websites ...
- 11
0
votes
3
answers
1k
views
Why does <input type="email"> mark valid email addresses as invalid?
Per Wikipedia, these are valid email addresses.
" "@example.org
"john..doe"@example.org
"very.(),:;<>[]\".VERY.\"very@\\ \"very\".unusual"@...
- 1,126
0
votes
0
answers
108
views
How to upload an image to django from an html input file
I am developing a web service on django with frontend on react. I ran into a problem that I can't upload an image to django. Below is my component code where I'm trying to download it:
export function ...
- 13
3
votes
0
answers
415
views
Placeholder for time input in Safari
I am using <input type="time" />. Chrome, Firefox, and Edge renders it properly i.e. the placeholder used is : --:-- -- where as Safari uses 12:30 PM as a placeholder. What is the ...
- 31
1
vote
1
answer
104
views
JavaScript hover event on a vendor specific pseudo-elements
I have the following html input tag.
$("input[type='range']::-webkit-slider-thumb").on('hover', function () {
//...
});
input[type="range"] {
height: 0.5rem;
box-shadow: 0 0 0.25rem ...
- 463
0
votes
1
answer
35
views
Resizing Input boxes and maintaining alignment
I am trying to resize my zip code input box to be half the size of the container. In the mobile version of my site it works. But if I try to change it in my media query at 768 px to be 50vw it knocks ...
