Question

I have two elements:

1. A texfield element, firstly hidden.
2. And a button element covering the textfield.

In other hand, I have one event called onDoubleClick which calls a function when a double click is made in the button. This function hides the button and show the textfield, but I need that the textfield is editable in this moment (like make a third click)

I read about focus() but it doesn’t help me… http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_html_blur

How can I obtain it?

EDIT:

I’m obtaining well the input element:

var htmlElement = document.getElementById(this._tabsTitle[pos]._hPath);
var input = htmlElement[0];
input.focus();

The htmlElement var is a form, and the input var is the input field, I obtain it well, I’m looking with chrome inspector, with debugger, but focus() doesn’t work…

SOLUTION

It’s was mine mistake…this code is part of a big project, and focus was working fine, but didn’t make anything due to a thread problem … I checked it and solved it, and now it works like a charm 🙂 thanks to all

Regards, Daniel

Answer 1

check this fiddle. I believe it does what you want.

html

<input type="text" style="display:none" id="txtField1" />
<input type="button" id="btn1" value="Double Click Here" />

js

function modify() {
   //lets hide the button
   document.getElementById("btn1").style.display= "none";
   // show the text field
   document.getElementById("txtField1").style.display = "block"; 
   // now focus on the field
   document.getElementById("txtField1").focus();  
}

var el = document.getElementById("btn1");
// attaches event to the button
el.addEventListener("dblclick", modify, false);

UPDATED according to comments on top(below question).

if you dont want the button to be hidden and make its value null.

replace the line

document.getElementById("btn1").style.display= "none";

by

document.getElementById("btn1").value= "";