How do I detect the event when tapping on an input?
I have a form where I have 5 inputs. I need to add a ccs class that changes the color of the label when the user changes from one input to another by tab
const InputGroup = function () {
const greating = function (e) {
console.log(e.target.value);
console.log("only clicked");
};
return (
<div className="input-group-with-icons">
<label htmlFor="name" className="form-label">
Name:
</label>
<div className="input-group">
<span className="input-group-text iconify" id="basic-addon1" data-icon="carbon:string-text" data-width="50" data-height="50"></span>
<input type="text" className="form-control" placeholder="Name" aria-label="name" aria-describedby="basic-addon1" name="name" onClick={greating} />
</div>
</div>
);
};
export default InputGroup;
I can't find a way to detect the tab event
enter image description here
You can use the focus event to detect focus in Javascript:
<input type="text" onfocus={focusinhandler} onfocusout={focusouthandler} />
If your goal is to changing styling, you can use the :focus selector in CSS:
.input-group-text.iconify:focus {
// Colour Change
}
which is applied when an element gains focus.
Related
There are two fields, subject and description and I want to add text where the cursor is. It means, if cursor is on description, it should add text in description and if cursor is on subject, it should add text on subject field.
one field is #subject
other one is #description
How I can achieve it?
<button type="button" class="btn btn-light mb-1" onclick="insertText('ticket_id')">Ticket ID</button>
function insertText(text)
{
// here will be code
}
inputs
<textarea class="form-control form-control-solid" rows="4" id="description" name="description" placeholder="Description"></textarea>
<input type="text" class="form-control form-control-solid" placeholder="Subject" name="subject" value="" />
There is a document.activeElement property, which contains currently focused element, but this will already be changed when click event occurs, so you'll need to use mousedown event, which happens before the focus changes to the button.
Then, element.selectionStart can be used to determine the cursor location. If you also need to replace selected text in the input you should use this in combination with element.selectionEnd and modify the click handler accordingly.
Here is an example:
ticketIdButton = document.getElementById('ticketIdButton')
ticketIdInput = null
ticketIdInputCursorLocation = 0
// In mousedown event document.activeElement has not changed yet
// which allows to keep track of previously focused input
ticketIdButton.addEventListener('mousedown', function() {
activeElement = document.activeElement
// For simplicity, let's use ticketIdInput class to identify
// the acceptable inputs for ticket id
if (activeElement.classList.contains('ticketIdInput')) {
ticketIdInput = activeElement
ticketIdInputCursorLocation = activeElement.selectionStart
}
else {
ticketIdInput = null
}
})
ticketIdButton.addEventListener('click', function() {
ticketId = '#1234'
if (ticketIdInput !== null) {
ticketIdInput.value = ticketIdInput.value.substring(0, ticketIdInputCursorLocation) + ticketId + ticketIdInput.value.substring(ticketIdInputCursorLocation)
}
})
<textarea id="description" class="ticketIdInput" placeholder="Description"></textarea><br />
<input id="subject" class="ticketIdInput" placeholder="Subject"><br />
<hr>
<button type="button" id="ticketIdButton">Ticket ID</button>
I need to make a datepicker
<input type="text" name="Birth" id="calendarInput" required class="inputField" placeholder="31.12.2001">
<input type="date" name="Birth" id="calendarHiddenInput" pattern="\d{4}-\d{2}-\d{2}" style="display: none">
<img id="calendarImg" src="images/calendarIcon.png">
When you write usual input[type=date], there is a clickable calendar icon, where you can pick a date. I want to make an event listener like this:
$('#calendarImg').click(function () {
$('#calendarHiddenInput').click();
});
But this function doesn't work. I want a usual input[type=text] but with small calendar icon, that shows a calendar like input[type=date] when you click on it.
P.S. When I do it, I'll pick value from calendarHiddenInput and paste it in calendarInput
Something like this. Replace "icon" with your image or text.
document.forms.form01.hiddendate.addEventListener('change', e => {
e.target.form.date.value = e.target.value;
});
input[type="date"] {
display: none;
}
<form name="form01">
<input type="text" name="date" />
<label>icon<input type="date" name="hiddendate"/></label>
</form>
The <label> element can be used for focusing on an input element even if it is hidden. The date picker (if there is one) will still show up.
<Draggable axis="y"
grid={[135,135]}
onStop={this.handleStop}
defaultPosition={{x: this.props.task.positionX, y: this.props.task.positionY,}}>
<div id="edit-task-component">
<form onSubmit={this.handleSubmit} id="edit-task-form" className="edit-task-form">
<input type="text" name="name" onChange={this.handleChange} placeholder="Name" value={this.state.name} required/>
<input type="text" name="description" onChange={this.handleChange} placeholder="Description" value={this.state.description} required/>
<button className="btn submit-btn" type="submit">Save </button>
</form>
</div>
</Draggable>
What happens is I will click on the input and it will focus for a split second then loses focus -- so i cant type in the input. I have to click on it a few times for it to actually focus, therefore allowing me to type in the input. How can I get it to stay focused after clicking once? I have tried setting autofocus to true after clicking the input but that didnt work either. Any ideas ?
Use enableUserSelectHack, this will not interfere with existing style
eg <Draggable enableUserSelectHack={false}>
Use cancel prop
eg: give any class name, it doesn't matter
<Draggable cancel=".just-name">
<input className="just-name" placeholder="Add text here" />
</Draggable>
Via a handle to enable drag is better and you can also avoid this kind of issue easily.
Here is the demo given by the official doc:
return (
<Draggable
axis="x"
handle=".handle"
start={{x: 0, y: 0}}
grid={[25, 25]}
zIndex={100}
onStart={this.handleStart}
onDrag={this.handleDrag}
onStop={this.handleStop}>
<div>
<div className="handle">Drag from here</div>
<div>This readme is really dragging on...</div>
</div>
</Draggable>
);
check its doc
the handle here is a CSS selector
This is my code:
Javascript:
$(".test").on("focusout", function (e) {
$("#output").append("Lost focus<br>");
});
HTML:
Inputs inside div:
<div class="test">
<input type="text" />
<input type="text" />
</div><br>
Inputs outside div:<br>
<input type="text" />
<div id="output">
</div>
I want to detect if user leaves "div.test". Unfortunately, "focusout" works also when I move focus to other object inside this div.
Look at this fiddle: http://jsfiddle.net/Piotrek1/wfukje3g/6/
Click on first input and use Tab to switch through textboxes. "
Lost focus" should appear only if user move out from the div, but it happens always. Why is that and how to change it?
The $ operator returns a collection. You have two inputs inside the <div class="test">. So it matches all elements and children with the .test class.
I think what you want two divs with separate input elements and two different classes OR, use an ID on the actual input element so the $ operator only matches the input id you want this event to fire on. http://jsfiddle.net/wfukje3g/7/
$("#test").on("focusout", function (e) {
$("#output").append("Lost focus<br>");
});
<div class="sometest">
<input id="test" type="text" />
<input type="text" />
</div><br>
Inputs outside div:<br>
<input type="text" />
<div id="output">
</div>
I have implemented piece of code to handle div focus out
$(document).ready(function () {
var count = 1;
$("#name").focusout(function (e) {
if($(this).has(e.relatedTarget).length === 0) {
$("#output").append("<label style='width:100%;'>"+ count++ +" Name div focus out </label>");
}
});
});
Inputs inside div:
<div id="name" class="test">
<input type="text" id="firstname"/>
<input type="text" id="lastname"/>
</div>
Inputs outside div:<br>
<input type="text" id="dob"/>
<div id="output" style="width:100%"></div>
In this piece of code I have used relatedTarget.
relatedTarget will provide the next focused element If next element is not the child of this div then it is div focus out.
Try this in your code.
I hope this will be helpful.
Thanks
JSFIDDLE LINK - Sample code
So I have the following function. What it does is listens for the focus event on all elements. If that element is either in $mobileMenu or $menuItems it permits it otherwise it removes the focus:
var $body = $("body");
var $mobileMenu = $("#mobile-menu");
var $menuItems = $("#main-menu a");
$body.on("focus.spf", "*", function(e){
e.stopPropagation();
$this = $(this);
// Prevent items from recieving focus and switching view
if (!$this.is($mobileMenu) && !$this.is($menuItems)) {
$this.blur();
} else {
console.log(this);
}
})
The issue I have is that this prevents the user from focusing on anything whatsoever if a normally focusable element that is now non-focusable precedes any of my white-listed elements as it just attempts to refocus on the same element over and over again.
Does anyone know how I can tell it to instead skip to the next focusable element?
If you set the tabindex to -1 on the element, it will ignore the tab.
Not sure if this works in all browsers but it works in Google Chrome.
<input type='text' value='regular'/>
<input type='text' tabindex="-1" value='with tabindex set to -1'/>
This works (updated) :
$body.on("focus.spt", "*", function(e){
$this = $(this);
if (!$this.is($mobileMenu) && !$this.is($menuItems)) {
$this.blur();
var next=$this.nextAll().find('a,input');
if (next.length>0) next[0].focus();
} else {
console.log('ok',this);
e.stopPropagation();
}
})
(updated) fiddle -> http://jsfiddle.net/CADjc/
You can see in the console which elements that receives focus (main-menu a and mobile-menu)
Tested on :
<input type="text" tabindex="1" value="test">
<span><input type="text" tabindex="2" value="test"></span>
<div><input type="text" id="mobile-menu" tabindex="3" value="mobile-menu"></div>
<div><span>
<div id="main-menu">
<a tabindex="4">main-menu</a>
<a tabindex="5">main-menu</a>
</div>
</span></div>
<span>
<input type="text" tabindex="6" value="test">
</span>
If you make something disabled, it won't receive focus. For example:
<input type="text" disabled="disabled" />
Do add it programmatically, you could do:
var el = document.getElementById('disableme');
el.setAttribute('disabled', 'disabled');
attr("readonly","readonly"), prevent input focus and value ARE send to the server.
CSS-only solution from one of my past projects
/* Prevents all mouse interactions */
.disabled-div {
opacity: 0.5;
pointer-events: none;
}
/* Prevents all other focus events */
.disabled-div:focus,
.disabled-div:focus-within {
visibility: hidden;
}
<h1>CSS Only Disable with Prevent Focus</h1>
<input placeholder="Normal text field">
<br><br>
<input class="disabled-div" placeholder="Disabled text field">
<br><br>
<input placeholder="Normal text field">
<br><br>
<input class="disabled-div" placeholder="Disabled text field">
<br><br>
Flickers slightly when it receives focus. That is because when it receives focus, visibility is set to 'hidden' and focus is lost and visibility is set back to 'visible' again. This is actually good because the user now has some idea where focus is while going over disabled fields...