News Articles input

Input field caret position problem in react

Hey, everybody. I’m new in web dev. I have a task on react to increase days in first part of string in input field by clicking ‘ArrowUp’ button.In addition mutable part (days) must be selected. Problem is when i click "ArrowUP" caret(|) return to the start position of string and selected(setSelectedRange) is disable. How to […]

How do you create a date field with react-hook-form that has 3 select boxes (month, day, year)?

I get how to use react-hook-form’s Control in creating an input. import styles from ‘./index.module.css’ import { Controller } from ‘react-hook-form’ export default function InputField({ label, placeholder, type, value, inputId, control, name, …props }) { return ( <div className={styles.field}> <label htmlFor={inputId} className={styles.label}>{label}</label> <Controller name={name} control={control} render={({ field }) => <input id={inputId} {…field} className={styles.input} placeholder={placeholder} />} […]

How do you create a date field with react-hook-form that has 3 inputs (month, day, year)?

I get how to use react-hook-form’s Controller in creating an input. import styles from ‘./index.module.css’ import { Controller } from ‘react-hook-form’ export default function InputField({ label, placeholder, type, value, inputId, control, name, …props }) { return ( <div className={styles.field}> <label htmlFor={inputId} className={styles.label}>{label}</label> <Controller name={name} control={control} render={({ field }) => <input id={inputId} {…field} className={styles.input} placeholder={placeholder} />} […]

How to clear file type input field’s file name in react

in this input field, it will only accept video files. if I try to upload any other files, by enabling all files option. it will show a alert. that’s working fine but after adding any other format file, when it checking that it is not a video file, it showing the alert but file name […]

Datetime-local input like duration input

I would like to use input which gets from user data about duration in format YYYY-MM-ddThh:mm. Datetime-local input typy uses this format and its easy to use because it holds format. I would like to get from user something like 0000-01-12T10:01. It should be information about duration of validity. Unfortunately Datetime-local input restricts me dates […]

How to show an input after selecting a select in React js

I’m trying to make the input field shows after selecting the option in select but they only appear individually What I managed to do only shows each field "C" individually, but when you select field 3, "C" 1, 2 and 3 will appear import React, {useState} from ‘react’; function Calculo() { const [taxa, settaxa] = […]

Open html5 datepicker on input click

By default, the datepicker opens when the icon is clicked. Now, i want the datepicker to appear when the input field is clicked. I can achieve this by enlarging the icon to 100% width, but i can’t make it transparent, so there would be no icon at all but only the text visible… I think […]

HTML tags | input

It is used to create interactive controls for web-based forms in order to accept data from the user. A wide variety of types of input data and control widgets are available, depending on the device and user agent. The element can be displayed in several ways, depending on the type attribute. If this attribute is […]

Change label color when focus within a input

input { background: transparent; position: relative; } label { color: black; } input:focus + label { color: red !important; border: 1px solid white; } <div class=”input-box d-flex flex-column”> <label for=”name” class=”py-2″>Your Name</label> <input class=”py-2 border-0 text-white” id=”name” type=”text” /> </div> I want to change the label text color, when i focus in a input of […]

How to focus on an input in a v-for in vuejs

I got a v-for for publishing all my gif in my vue js app When I write a comment in to my input, it’s writing in all the input of all gifs and I want to have the focus only on the gif input concern Source: Vue – Stack Overflow

How can I change the color of my input after submitting a form

I have a function that is supposed to render a number of math sums alongside a form where a user is supposed to type in their answer. As of now when you submit one of the forms it will take the answer to the math sum and will check it with the user input to […]

How can I change the color of my input after submitting a form

I have a function that is supposed to render a number of math sums alongside a form where a user is supposed to type in their answer. As of now when you submit one of the forms it will take the answer to the math sum and will check it with the user input to […]

updating state based on numbers and characters in passwords react

I am trying to create some password validation UI for practice in react. Meaning the credentials for a password to be valid appear in red initially, and as the user creates their password they are validated and they turn green. Normal password conditions such as: password contains an uppercase, a number, a special character. Here […]

React link inputs with another input (Link multiple selects)

I am new to React. I made a form using material UI. I want if I select one of the inputs then it generates an input for me to fill in. I did a lot of research for 3 days but still haven’t found my solution. Thank you for your help. You will see the […]

Truly hidden clear icon when using -webkit-search-cancel-button

Implemented a clear button using -webkit-search-cancel-button following the next post: https://stackoverflow.com/a/64267916/1065145 The problem with the implementation referenced above is that it renders the clear icon invisible when out of focus, but it still occupies space and it doesn’t look nice at all: It can be either a long placeholder on a small device or a […]

Ion-input of type "date" has calendar icon of the wrong color

I have an ion-input field with type="date". The ion-input automatically gets a calendar icon with the corresponding functionality. The only thing is that everything is white in my application, but I can’t seem to get this icon to turn white. It just likes to stay black Anybody know the solution to getting this icon in […]

Transfer table data between pages with javascript

I’ve created a form that asks the user to select an option from a dropdown and a quantity from a number input. Using javascript I have calculated a couple of different values and placed them inside a new table. I want to have the user click a submit button which will take the user to […]

Change value of textarea forcibly in React

I am creating a tag input component in React. The tag input box works visually, but not functionally. It appears as if you are adding/removing tags from the input box, but I haven’t been able to successfully pass the array value of the field to the state of it’s parent form (so that it can […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.