Wait for transition to finish before setting focus to text input

How can I ensure that the focus is automatically set to the text input field after a transition has ended? I want the user's keyboard input to immediately go into the text input field. Is it possible to achieve this using only CSS, or do I need to use JavaScript (without jQuery)? Something like

document.getElementByClassName('text-input').focus();

does not achieve the desired result. 

<div class="wrapper">
  <div class="element"></div>
  <input class="text-input" type="text" name="search" />
</div>


.wrapper {
  height: 40px;
  width: 75px;
  border-style: solid;
  border-width: 2px;
  border-radius: 40px;
  border-color: red;
  display: flex;
  align-items: center;
  padding-left:30px;
  -webkit-transition: width 0.4s ease-in-out;
  box-sizing:border-box;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
  width: 100%;
}

.text-input {
  max-width: 0;
  float: left;
  padding: 0px;
  border: 0px transparent;
  -webkit-transition:max-width 0.6s ease-in-out;
  transition:max-width 0.6s ease-in-out;
}

.wrapper:hover .text-input {
  max-width: 50%;
  padding: 2px;
  border: 1px solid #d4d4d4;
}

Explore this codepen:

https://codepen.io/anon/pen/MqjmQz

javascripthtmlcsscss-transitions

Answer №1

After exploring various solutions, I have come across using the transitionend event listener as a more effective method. Here is an additional approach for achieving the desired outcome. Take a look.

JS:

var txtInput = document.querySelector('.text-input');

txtInput.addEventListener("transitionend", function(e){
  document.getElementById('inputField').focus();
}, false)

https://codepen.io/anon/pen/MqjmQz

Answer №2

Here is a solution using Pure JS: 

document.getElementById("wrapper").onmouseover = function()
{
setTimeout(function(){mouseOver()},600)
};


function mouseOver(){
document.getElementById('inputField').focus();
}
.wrapper {
  height: 40px;
  width: 75px;
  border-style: solid;
  border-width: 2px;
  border-radius: 40px;
  border-color: red;
  display: flex;
  align-items: center;
  padding-left:30px;
  -webkit-transition: width 0.4s ease-in-out;
  box-sizing:border-box;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
  width: 100%;
}

.text-input {
  max-width: 0;
  float: left;
  padding: 0px;
  border: 0px transparent;
  -webkit-transition:max-width 0.6s ease-in-out;
  transition:max-width 0.6s ease-in-out;
}

.wrapper:hover .text-input {
  max-width: 50%;
  padding: 2px;
  border: 1px solid #d4d4d4;
}
<div class="wrapper" id="wrapper">
  <div class="element"></div>
  <input class="text-input" id="inputField" type="text" name="search" />
</div>

Edit
You can also implement a mouseout function so that the field gets blurred when the cursor goes out.

document.getElementById("wrapper").onmouseover = function()
{
setTimeout(function(){mouseOver()},600)
};
document.getElementById("wrapper").onmouseleave = function()
{
mouseOut()
};


function mouseOver(){
document.getElementById('inputField').focus();
}
function mouseOut(){
document.getElementById('inputField').blur();
}
.wrapper {
  height: 40px;
  width: 75px;
  border-style: solid;
  border-width: 2px;
  border-radius: 40px;
  border-color: red;
  display: flex;
  align-items: center;
  padding-left:30px;
  -webkit-transition: width 0.4s ease-in-out;
  box-sizing:border-box;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
  width: 100%;
}

.text-input {
  max-width: 0;
  float: left;
  padding: 0px;
  border: 0px transparent;
  -webkit-transition:max-width 0.6s ease-in-out;
  transition:max-width 0.6s ease-in-out;
}

.wrapper:hover .text-input {
  max-width: 50%;
  padding: 2px;
  border: 1px solid #d4d4d4;
}
<div class="wrapper" id="wrapper">
  <div class="element"></div>
  <input class="text-input" id="inputField" type="text" name="search" />
</div>

Answer №3

Unfortunately, there isn't a built-in feature for this specific functionality. However, you can achieve the desired effect by utilizing a setTimeout function in your script. Here's an example:

var wrapper = document.querySelector('.wrapper');
wrapper.addEventListener('mouseover', function() {
  setTimeout(function() {
    wrapper.classList.add('focus');
    document.querySelector('.text-input').focus();
  }, 600)
});

To ensure that the container doesn't shrink when the mouse moves away, you'll need to make some adjustments to your CSS styles. Here's a snippet with the necessary changes:

.wrapper {
  height: 40px;
  width: 75px;
  border-style: solid;
  border-width: 2px;
  border-radius: 40px;
  border-color: red;
  display: flex;
  align-items: center;
  padding-left:30px;
  -webkit-transition: width 0.4s ease-in-out;
  box-sizing:border-box;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover,
.wrapper.focus {
  width: 100%;
}

.text-input {
  max-width: 0;
  float: left;
  padding: 0px;
  border: 0px transparent;
  -webkit-transition:max-width 0.6s ease-in-out;
  transition:max-width 0.6s ease-in-out;
}

.wrapper:hover .text-input,
.wrapper.focus .text-input{
  max-width: 50%;
  padding: 2px;
  border: 1px solid #d4d4d4;
}

You can view a live demo of this implementation on CodePen here: https://codepen.io/lucafbb/pen/Eegmrx?editors=1111

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenges with asynchronous problems related to importing models utilizing promises in conjunction with the three.js

I'm currently struggling to resolve a promise in my script. The promise needs to be resolved when a function containing 3D file imports finishes importing, but I'm unsure how to make this happen. Is there a way to receive a signal or data from t ...

javascriptpromisethree.js

Contrasting the uses of element(...) versus element(...).getWebElement() in Protractor

What is the advantage of using element(...).getWebElement() instead of element(...) when they both perform similarly? Why are there two different APIs for the same purpose? ...

javascriptseleniumselenium-webdriverprotractor

React Component that closes when it loses focus

In my React project, I am working on creating a custom select2 style component. Most of the functionality is complete, but I am struggling with figuring out how to hide the result box when the user clicks away. Here is the render method: render() { l ...

javascriptreactjsreact-redux

I can't seem to figure out why the removeChild() function is not functioning properly in my

Recently, I've been working on a search website where users can input either a partial or full name and then click a button to display a list of actors whose names contain that specific string in a hint-like fashion. These names are sourced from a MyS ...

javascripthtmlajax

Expanding the row beyond the container to match the width of the viewport

Can Bootstrap 5 be used to extend a row outside a container without causing a horizontal scrollbar? After researching the questions related to this topic, it seems that pseudo-elements are commonly used. However, when attempting to use a pseudo-element, a ...

csstwitter-bootstrapbootstrap-5

UI-Router causing issues with AngularJS anchorScroll functionality

Currently, I am utilizing ui-router and attempting to implement automatic scrolling within the controller. However, it seems that anchorScroll function is not working as expected. My assumption is that it may be due to having two '#' symbols in t ...

javascriptangularjsanchor

Tips for finding group words within a div panel

Check out this interactive demo I created to demonstrate what I need help with. There are multiple panels containing words, each separated by a line break. I am trying to create a filter that will hide panels that do not match the words entered in the sea ...

javascriptjquerysearchfilter

Guide on enabling the scrollbar within a text area while utilizing the pointer-events: none property

After applying the CSS rule pointer-events: none to the text area, I noticed that the scrollbar was disabled. I need the scrollbar to remain enabled so that users can scroll and view the entire content, while still preventing editing within the textarea u ...

htmlcsssassflexboxscss-mixins

Adjust the size of a Div/Element in real-time using a randomly calculated number

Currently, I am working on a script that is designed to change the dimensions of a div element when a button on the page is clicked. The JavaScript function connected to this button should generate a random number between 1 and 1000, setting it as both the ...

javascripthtmlcss

Skip creating declarations for certain files

src/ user.ts department.ts In the scenario outlined above, where there are two files in the src directory (user.ts and department.ts), is there a way to exclude the generation of declaration files specifically for department.ts when running tsc wi ...

javascripttypescript

Querying the children of an element using jQuery

$('.Title').children(function() { var titleValue = $('.Title').text(); console.log(titleValue); }); Wondering how to access all children with the 'title' tag and log their values individually. ...

javascriptjquery

Could using 'require' in node.js lead to a memory leak issue?

I have been working on a program that experiences continuous heap growth. The program is quite simple - it repeatedly tries to load an external file (SyntaxError) using require. However, this external module fails to load due to a syntax error present in i ...

javascriptnode.jsmemorymemory-leaks

Transferring data from an Angular 2 component to a service

I am trying to pass data from an Angular component to a service and utilize the service's methods to manipulate it. Here is an example: class SomeComponent { public info: Array<any> = MyData; constructor(private myService: TablePag ...

javascriptangulartypescriptangular-servicesangular-components

Button remains disabled using jQuery until input has passed validation

Hey there! I've set up a form in my custom web app that allows users to update their details. Check out the code: <g:form class = "updateCustomerClient" controller="customerClient" action="updateCustomerClient" id=&quo ...

javascripthtmljquerycss

During the click event, two distinct $.ajax requests interfere and cancel each other out

Here's a dilemma I'm facing: On my webpage, I have implemented two different click events. The first one opens a modal displaying a larger image when you click on a thumbnail picture (similar to Instagram on PC - I created an Instagram clone for ...

javascriptphpjqueryhtmlajax

Guide to setting a background image on a div when hovering using jQuery

I'm having trouble adding a background image to this specific div element: <div class="logo-main"></div> Here is the script I've been using, but it doesn't seem to be working as expected: <script type='text/javascript& ...

jquerycssbackgroundhover

In what specific format does this plugin expect the callback string to be encoded as? (jquery-ui-multisearch)

Currently, I'm working with a plugin named "Jquery-ui-multisearch" that provides an autocompletion feature in an input field based on either a provided array or an external source (such as ajax/api, etc). You can find more information about this plugi ...

javascriptjqueryajaxjquery-ui

Assign value to an element in an array using the value from another element

Is it possible in Javascript to set the value of one array element based on another without changing both elements? Specifically, how can I only modify arr[1] while leaving other elements unchanged? arr[0] = {i: 0}; arr[1] = arr[0]; arr[1]['summ&apos ...

javascriptarrays

steps for signing up and keeping the parameters current

I am currently working on an app using React Native built with Expo. I have been trying to register and update some columns, but I am encountering issues. Below is a snippet of my source code: import * as Location from 'expo-location'; const UR ...

javascriptfirebasereact-nativefirebase-realtime-databaseexpo

Narrowing down types within an array of objects

I am encountering an issue with the following code snippet: const f = (x: unknown) => { if (!x || !Array.isArray(x)) { throw new Error("bad"); } for (const y of x) { if (!y || typeof y !== "object") { throw new E ...

javascripttypescript