We Keep Coding

How to prevent select event from firing after every input?

I'm trying to create a custom text editor in React, thus I've created a div which has a contentEditable attribute. Now I want to perform some action when the user selects a part of the inputted text. To do that I'm using the select event as onSelect attribute on my div. The problem is that, select event runs not only when selecting the text, but also when I click on the input box, or after any input. How can I prevent it, so that it gets fired only when the text is selected ?
Component:
function EditorBody(props) {
return (
<div className="editor-body">
<div
className="text-section"
contentEditable
role="textbox"
placeholder="Text goes here ..."
onSelect={() => window.alert("You've selected a text")} // Runs after every input, not only when the text is selected
></div>
</div>
);
}
export default EditorBody;

You can change the logic in your onSelect to be able to determine whether or not to execute the selected logic.
onSelect={(event) => {
if (document.getSelection().toString().length > 0) {
// your selection logic
window.alert(document.getSelection().toString());
}
}}
This way the logic will be executed only if the user is selecting something and not on other primary events that might set off the secondary select event (focus, keypress, etc).

React/Next.js how to get other Element event target value on button click

I have an input element and a button in React:
<li><input type="text" placeholder="Enter new ID"></input>
<button onClick={(e)=>this.saveKonfigElementHandler()}>Save</button></li>
Now, when I enter some value into the input field, I want to save the value into some array when I click on the button.
Is it somehow possible to get a reference to that input field (e.g. the target.value of the input field) to save it when clicking the button?
Or would I simply have to do it with an onChange event that saves the current input value into some Variable, and when I click the button, I will simply retrieve that value to save it into some array? Maybe that would be a lot simpler.
E.g:
<input type="text" value={this.state.inputFieldText.join('')} onChange={(event) => this.textHandler(event)}></input>
in the textHandler Method, I will save the target value from the input field into a Class Component state variable in the textHandler() method. And when I click the button, I retrieve that state value and can do some manipulation with it?

A modern way to do it, with function components, hooks and a controlled form element, is:
import { useState } from 'react'
function MyComponent({ initialId, onSave }) {
const [newId, setNewId] = useState(initialId)
return (
<li>
<input
type="text"
placeholder="Enter new ID"
onChange={(e) => setNewId(e.target.value)}
/>
<button onClick={() => onSave(newId)}>Save</button>
</li>
)
}
I'd also note that it is considered better accessibility practice to use a label element for describing the purpose of your field, rather than a placeholder. Placeholders are more appropriate for example input.

Is it somehow possible to get a reference to that input field (e.g. the target.value of the input field) to save it when clicking the button?
Yes.
Or would I simply have to do it with an onChange event that saves the current input value into some Variable, and when I click the button, I will simply retrieve that value to save it into some array? Maybe that would be a lot simpler.
That would be a slightly more React way to do it.
Your DOM-only approach is more "uncontrolled" (see these docs for what controlled/uncontrolled means). You'd do it like this:
Change your onClick to pass e to the handler:
onClick={(e)=>this.saveKonfigElementHandler(e)}
In saveKonfigElementHandler, use e.target.previousElementSibling to access the input:
saveKonfigElementHandler(e) {
const { value } = e.target.previousElementSibling;
// Use `value` ...
}
That's fragile, of course; if you change your structure so another element is between the button and the input, or the input is within a container element, etc., it'll break — which is one argument for the controlled approach. You could store a link to the input in a data attribute on the button:
<li><input id="id-input" type="text" placeholder="Enter new ID"/>
<button data-input="#id-input" onClick={(e)=>this.saveKonfigElementHandler(e)}>Save</button></li>
and then use querySelector to get it:
saveKonfigElementHandler(e) {
const { value } = document.querySelector(e.target.getAttribute("data-input"));
// Use `value` ...
}
but the you're having to keep selectors unique, etc.
Which you choose, controlled or uncontrolled, is ultimately up to you.

I'm not sure about your question. Do you want something like this ?
<button data-input="#id-input" onClick={this.saveKonfigElementHandler(value)}>Save</button></li>
saveKonfigElementHandler = (value) => (event) => {}

Angular: Blur input on enter

I got an editable oneline headline like this:
<h1 class="headline" contenteditable="true" [textContent]="headline.name" (input)="headline.name=$event.target.textContent" (keydown.enter)="submit();false">
However, when I hit enter the input field keeps its focus.
How can I make it lose focus on enter?

As yurzui pointed out in the comments:
(keydown.enter)="$event.target.blur();submit();false"

You can use sharp symbole to creates a template variable that references element directly:
<input type="text" #search (keyup.enter)="search.blur()">

If you want to fire blur event with key enter event, then simply pass $event in function and $event.target.blur(); in the function.
Ex: <div (keyup.enter)="getControl(value,$event)"></div>
and in function, add
getSearchControl(ctrl, event) { event.target.blur(); // your code }

React - Show different value in input box based on the state

Problem Question - I have a form. The form has a state of editable and non-editable, which makes the input box to edit. Now this particular input box has to show different value depending upon what state it is in. i.e if it is not in editable state it has to show '27 November 2016' and if editable state it has to show '27/11/2016'.
The problem is when i try to edit this input box, therefore remove the pre defined value '27/11/2016' it does not work. I think it is not possible to bind function with value.
What I tried -
function showDate() {
if(!this.props.isEdit){
return longDate();
}
return shortDate();
}
<input
id='test'
value={this.showDate()}
onChange={this.props.onInputChange}
readOnly={!this.props.isEdit}
/>
Can someone please suggest on this?
Update: I have a Component which has function onInputChange and all i want to show different content inside input box when the form is in edit mode.

you should use state instead of props for input change, something like below
function onInputChange() {
if(!this.props.isEdit){
this.setState({
date: longDate()
});
return;
}
this.setState({
date: shorDate()
});
}
<input
id='test'
value={this.state.date}
onChange={onInputChange}
readOnly={!this.props.isEdit}
/>

How to change focus on textbox dynamically?

I'm working on a script that interacts with an html page.
The html page has two text boxes, and a submit button.
Each time you press the send button the focus on the textbox moves from the first to the second and so on.
Until now I couldn't onFocus to interact with the code. Who can help me figure out how to fix it?
I found this: http://www.w3schools.com/jsref/event_onfocus.asp
This is my html code:
<html>
<input type="text" id="c1"><br>
<input type="text" id="c2"><br>
<input type="button" id="enter" onClick="focus();">
<script>
function focus()
{
}
<script>
</html>

You need to use the focus() method for the element you want to be focused:
function focus()
{
document.activeElement.nextSibling.focus();
}
that should move the focus to the next dom element each time you click the button.
Edit:
You could write something like this:
function focus()
{
if (document.activeElement.getAttribute('id') == 'c1'){
document.getElementById('c2').focus();
}else {
document.getElementById('c1').focus();
}
}

Basically all u want to do is check to see if the form has been filled in? If not it focuses on a particular field which has not been filled in?