最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - .focus() Not Focusing On New Element - Stack Overflow

programmeradmin4浏览0评论

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.

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.

Share Improve this question edited May 14, 2013 at 0:43 tay10r asked May 13, 2013 at 21:30 tay10rtay10r 4,3572 gold badges27 silver badges45 bronze badges 5
  • @tadman jQuery?? What the heck is this for? It is like saying Why you're not using CodeIgniter in the first place. It makes very hard to get wrong. – Jan Turoň Commented May 13, 2013 at 21:36
  • 2 What you have seems to work fine for me here. – Ja͢ck Commented May 13, 2013 at 21:41
  • I'm not using it so that I get a better understanding of pure javascript. I'd really rather not debate here whether or not I should be using jQuery anyway – tay10r Commented May 13, 2013 at 21:41
  • @tadman Read my last ment – tay10r Commented May 13, 2013 at 21:54
  • 2 Since this is a JavaScript question, policy seems to be: Don't answer it telling the asker to use jQuery. Just answer with JavaScript, unless jQuery or other frameworks are explicitly requested, or named as being used. – doppelgreener Commented May 13, 2013 at 23:00
Add a ment  | 

3 Answers 3

Reset to default 5

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

The reason is that since you're immediately invoking the select and focus methods. The browser didn't have a chance yet to insert the element so it's not part of the DOM.

A quick and dirty solution is to use the setTimeout-function with a value of 0 milliseconds:

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

This causes the browser to do everything it has to do, and then run the function you passed into the setTimeout

The following fiddle shows your example in a working state: http://jsfiddle/Kennethtruyers/fX8h6/

I fixed the problem by changing the function that renames the div to be triggered on 'mouseup' instead of 'mousedown'.

I think the reason this was causing a problem is because the Rename() function was being triggered on mousedown, causing the focus to be set during 'mousedown', but the contextmenu wasn't being hidden until 'mouseup'.

I can't confirm that's the reason but I do know that the code works after 'mousedown' was changed to 'mouseup' for the trigger of Rename().

发布评论

评论列表(0)

  1. 暂无评论