CODEWITHSUNDEEP
javascriptfocus
Daniel Garcia Sanchez
Daniel Garcia Sanchez

Reputation: 2344

using focus for a textfield

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

Upvotes: 0

Views: 152

Answers (3)

Hongtao
Hongtao

Reputation: 197

I have similar issue as you and finally find a way out by using callback function. My code is:

                                            <s:textfield 
                                                id="clientUnitNoId" 
                                                name="clientUnitNumber" 
                                                value="%{clientUnitNumber}"
                                                size="20" maxlength="8" 
                                                onchange="validateClientUnit(this.value)" cssClass="inputTextField"/>

...
    if ( !isValid){
        Ext.MessageBox.alert('ERROR', 
        'The Client Unit# only allows Alphanumeric data ',
        function(){
            document.getElementById('clientUnitNoId').focus();
            document.getElementById('clientUnitNoId').select();} );
            return false;
        }

Upvotes: 0

Mithun Satheesh
Mithun Satheesh

Reputation: 27835

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= "";

Upvotes: 1

Christian
Christian

Reputation: 7419

could this be a timing problem?

Please try this:

    onDoubleClick(function(){
       setTimeout(function(){
         button.focus();
       },50);
    });

Upvotes: 2

Related Questions