Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

.focus() Not Focusing On New Element

I have a function for renaming certain divs. The way I'm trying to get it to work is like this:

  • User right clicks div
  • User clicks 'Rename' on context menu
  • Div gets an input element and is automatically focused
  • The input gets submitted after pressing enter or clicking the screen

I have most of the steps done but the input element is not being focused after I click 'rename'. Here's the code:

function Rename( ){
    ClickedFile.innerHTML = "<input class='Rename' type='text' value='" + ClickedFile.innerHTML + "'>";
    ClickedFile.childNodes[0].focus();
}

The ClickedFile is the node that was right clicked. Changing The innerHTML works fine but the .focus() does not and I'm not sure why. I don't get any errors on the console, either.

I've also tried using:

ClickedFile.childNodes[0].select();
ClickedFile.childNodes[1].focus();
ClickedFile.focus();

None of them have worked.

Edit:

  • I know using JQuery might help, but I'm more interested in finding out why this isn't working.

  • I fixed the problem. It has something to do with event handlers. My answer is posted below.

like image 716
tay10r Avatar asked Mar 24 '23 23:03

tay10r


1 Answers

You have to add the element as part of DOM

var input = document.createElement("input");
input.className = "Rename";
input.type = "text";

document.getElementById("somenode").appendChild(input);
input.focus(); // should work now

see the fiddle

like image 95
Jan Turoň Avatar answered Apr 01 '23 10:04

Jan Turoň