Develop Reference

Enable login button as soon as user fills both fields in Javascipt

I need to enable the submit button as soon as all input fields has value enterred. I have two input fields type text and type password and a button which is disabled (I set its class as "disabled" than use CSS to change color etc..), I would like to remove that class whenever the above condition is met. I added 'change' and 'input' event listeners to all field like below:
const inputs = [...document.querySelectorAll('input[type="text"], input[type="password"]')];
const continueBtn = document.querySelector('continuebtn');
const signinForm = document.querySelector('#sign-in-form');
inputs.forEach((input) => {
input.addEventListener('input', function(e){
if (input.value !== '') {
continueBtn.classList.remove('disabled');
}else{
continueBtn.classList.add('disabled');
}
}
});
Tried with e.target.value.trim() === '' as well
I guess the above would be applied to all inputs and check if they're empty when the user is typing, but I'm not able to make it work: the button is being activated no matter what I do.
I would need some help in plain Javascript as this is what I'm currently learning. no jQuery. Thanks

Use the every() method to check all the inputs, not just the one that the user is currently editing.
const inputs = [...document.querySelectorAll('input[type="text"], input[type="password"]')];
const continueBtn = document.querySelector('#continuebtn');
const signinForm = document.querySelector('#sign-in-form');
inputs.forEach((input) => {
input.addEventListener('input', function(e) {
if (inputs.every(input => input.value.trim())) {
continueBtn.classList.remove('disabled');
} else {
continueBtn.classList.add('disabled');
}
});
});
#continuebtn.disabled {
background-color: grey;
}
<input type="text">
<input type="password">
<button id="continuebtn" class="disabled">Continue</button>

Submit button not changing from disabled to enabled after Validation of field length

I have a React form with just a text area and a submit button. I set the submit button's state to disabled to begin with, and then after the user enters 100 chars or more I want to enable the Submit button.
The issue I'm having right now is that after I input more than 100 chars, the submit button remains disabled and doesn't change to enabled state.
This is the updateFieldLength function I am calling upon the textarea field's onChange.
const updateFieldLength = e => (
setText(e.target.value), () => (
validateFieldLength()
)
)
and this is the validateFieldLength function:
function validateFieldLength() {
if (submitDisabled && text.length > 100) {
setSubmitDisabled(false);
} else if (!submitDisabled && text.length <= 100) {
setSubmitDisabled(true);
}
}

Your problem seems to be that the onchange event is triggered only when textarea loses focus. I guess it would work with the oninput event, shown below
const setBackground = (element, background) => {
element.style.background = background;
}
<textarea id="test-on-change" onchange="setBackground(this, 'green')" rows="10" cols="30">Example with onchange, start typing...</textarea>
<textarea id="test-on-input" oninput="setBackground(this, 'yellow')" rows="10" cols="30">Example with oninput, start typing...</textarea>

This should do the job
import React from 'react'
const MyComponent = () => {
const [text, setText] = useState('')
const handleTextChange = e => {
setText(e.target.value)
}
return(
<>
<textarea onChange={handleTextChange}>
{text}
</textarea>
<button disabled={text.length < 100}>
Submit
</button>
</>
)
}

How to prevent react-dates SingleDatePicker to open on focus?

I'm using react-dates SingleDatePicker. The visibility of the calendar is controlled by the focused prop. When using tabs on the website, I don't want the calendar to open, I want it to open on enter key. Is there a way to achieve this? Thanks!

You should to control "focused" property and onFocusChange method. Also set the listener to container. For example
.....
const [focusedInput, setFocusedInput] = useState(null);
const handleUserKeyPress = (evt) => {
if (evt.keyCode === 13 && !evt.shiftKey) setFocusedInput(true);
};
....
<div onKeyUp={handleUserKeyPress}>
<SingleDatePicker
focused={focusedInput}
onFocusChange={({ focused }) => {
const focus = focusedInput && focused ? true : false;
setFocusedInput(focus);
}}
.....
/>
</div>
.....

text box I need to use all this methods onKeyDown, onMouseUp and onChange

in my text box I need to use all this methods onKeyDown, onMouseUp and onChange.
when I try to select the text in my textbox onMouseUp event is calling,
after selection if I delete its calling onChange method.
is it possible to avoid, since onselection and deletion of that text I need to call another api fetchSearch
I debugged by putting consoles but still not successful
can you tell me how to fix it.
providing my code snippet below and sandbox below
all my code is present inside Button.js which is iniside containers folder
https://codesandbox.io/s/loving-moon-0h0fm
const onKeyDown = e => {
console.log("e.keyCode", e.keyCode);
if (e.keyCode === 8) {
console.log("delete---->", e.target.value);
getPosts(channel);
if (e.target.value === "") {
console.log("onKeyDown delete empty value--->", e.target.value);
fetchSearch(channel);
}
}
};
const onMouseUp = e => {
console.log("onMouseUp e.keyCode", e.keyCode);
if (e.target.value === "") {
console.log("onMouseUp delete empty value--->", e.target.value);
fetchSearch(channel);
}
};
return (
<div>
{/* <button
onClick={() => {
getPosts(channel);
getAlert();
}}
className="btn btn-primary btn-lg btn-block"
>
Get top news
</button> */}
<InputBase
// className={classes.input}
placeholder="Search Google Maps"
inputProps={{ "aria-label": "Search Google Maps" }}
onChange={e => {
console.log("onChange e.target.value--->", e.target.value);
getPosts(channel);
}}
onKeyDown={() => {
// getPosts(channel);
onKeyDown();
}}
onMouseUp={() => {
// getPosts(channel);
onMouseUp();
}}
//onKeyDown={onKeyDown}
// onMouseUp={this.onMouseUp}
/>
</div>
);

To ignore delete key presses in onChange method you could add the following to the first line of your onChange method:
if(e.target.value == '') return
Your onChange method would now do nothing if the text box is empty (e.g. user just pressed delete)
Similarly you could filter out the case where text is selected from the onMouseUp event e.g.:
if(window.getSelection().toString().length > 0) return
You can use similar if statements to filter out all non wanted event triggers.

Detect if shift key is down React Native

How can I detect if the shift key is currently pressed down? I have a text input, and when the user presses the enter key I only want to submit the form if they are not currently pressing the enter key (same form functionality as Facebook Messenger on desktop).
Here is my text input:
<TextInput
style={styles.input}
placeholder={'Enter message'}
onKeyPress={this.handleKeyPress}
/>
And here is the handler:
handleMessageInputKeyPress(e) {
if(e.nativeEvent.key == "Enter"){
// Now check if the SHIFT key is currently pressed or not...
}
}

You can use event listeners to detect any time a key is pressed (or unpressed), then filter the results for the key you want to use as a conditional. Here's an example using hooks:
const [shiftHeld, setShiftHeld] = useState(false);
function downHandler({key}) {
if (key === 'Shift') {
setShiftHeld(true);
}
}
function upHandler({key}) {
if (key === 'Shift') {
setShiftHeld(false);
}
}
useEffect(() => {
window.addEventListener('keydown', downHandler);
window.addEventListener('keyup', upHandler);
return () => {
window.removeEventListener('keydown', downHandler);
window.removeEventListener('keyup', upHandler);
};
}, []);
This will change the state to true of false depending on whether the shift key is held down or not. Then you can plug that value in anywhere you need it.
Tip: You can use this format to listen for any other key. I had a hard time finding documentation on what the keys are called. If you have trouble finding the key name, implement this code then console log key just before the if statement in the downHandler.
Also, make sure you leave the listeners in a useEffect, otherwise you'll get data leaks.

For those who are still looking for the solution:
It seems the event received by the callback onKeyPress has the following properties:
It's nice to see it also has ctrlKey & altKey.
So the solution would be:
<TextInput
onKeyPress={event => {
if (event.shiftKey && event.key === "Enter"){
// ...
}
}} />