0

Can some one help me..

I have a text box which is readonly by default on page load. On click event of this text box i have to do two things.

  • make it editable
  • keep focus on text box

For this, i have written a code removeAttr to make it editable, then focus() to keep focus on it.

It is working in IE8+, FF, Chrome as expected. But I need to make it work in IE7 too as we have IE7 in client's compatible browsers list.

Note: the problem is only with focus, text box is turned to editable after clicking. But need second click to keep focus in it. Expecting it to be done on the first click only.

<input name="testId" id="testId" size="25" maxlength="40"  tabindex="21" class="width250" readonly="true"/>

$("#testId").click(function(){
   $(this).removeAttr("readonly");
   $(this).focus();
});
Srikanth
  • 534
  • 1
  • 7
  • 20
  • 5
    Let's see the relevant HTML and JavaScript. – Anthony Grist Jan 04 '13 at 12:18
  • As @Anthony says, you need to provide the HTML and JavaScript code, otherwise we are simply shooting in the dark. **Edit** your question with code (use [the help page](http://stackoverflow.com/editing-help) for instructions on formatting of code within StackOverflow) and then we can try and help you – freefaller Jan 04 '13 at 12:27
  • 1
    So it's readonly until the user clicks, at which point it becomes editable. How is that any different from just being editable in the first place? What is being achieved by having it in the readonly state to begin with? – SDC Jan 04 '13 at 12:34
  • @SDC on clicking text box itself, need to make it editable & keep focus on clicked text box. Actual scenario is i have 'n' sections with 2 text boxes in each. when page loaded all sections are disabled and on clicking any of the text box i need to remove readonly attribute of two inputs of that particular section. And focus should be kept on clicked input. – Srikanth Jan 04 '13 at 12:40
  • I still don't get what's being achieved that couldn't be done just by styling them to *look* disabled until they're focussed. – SDC Jan 04 '13 at 12:45
  • I have different sections in my page. say 10 sections. Each contains 2 input text boxes. i.e 20 inputs totally. we should allow user to enter input only into either section1 text boxes or section2 text boxes.. and so on. but we should not allow combination. So, be default we made all inputs readonly. when clicking on particular section or input, we just enable input fields of that section & make readonly true for all other sections inputs. – Srikanth Jan 04 '13 at 13:00
  • Try the following `$("#testId").click(function(){ $(this).removeAttr("readonly"); $(this).attr('tabindex','0').focus(); });` – Ashwin Preetham Lobo Jan 04 '13 at 13:14
  • I think some other event may taking the focus out from input element. Add the following code snippet and check. `jQuery('#testId').focusin(function(){ console.log("focused"); });` If that is the case then use `e.preventDefault();` after setting the focus. – Ashwin Preetham Lobo Jan 04 '13 at 13:46
  • focusin event fired the movement when ic licked on readonly textbox, but i don't see focus in text box(i tested by typing some thing). If we think some other event is taking the focus, remaining browsers would also have this problem. But the problem is only with i.e7 not even with i.e8. thanks for your comments Ashwin. – Srikanth Jan 04 '13 at 14:09
  • $("#testId").blur().focus() worked for me.. Thank u all for ur comments. – Srikanth Jan 04 '13 at 14:15

2 Answers2

2

One of the illness of IE is that most of the evens do not update the DOM automatically. What you do is unfocus the element and focus it again to make it editable.

Try this approach it will solve your problem on IE

$("#testId").click(function () {
   $(this).removeAttr("readonly").blur().focus();
});
Jobert Enamno
  • 4,403
  • 8
  • 41
  • 63
0

Try setting a timeout for the focus.

$("#testId").click(function(){
   $(this).removeAttr("readonly");
   setTimeout(function() {$(this).focus(); }, 10);
});

(from here)

Community
  • 1
  • 1
Beast-a-tron
  • 503
  • 10
  • 28