Method to disable input text using javascript until a function is completed

I have a input box and I want to temporarily disable input until a function completes in javascript and then re-enable it. I know the element.disabled = true and element.disabled = false (doing that after the function) won't bring it back to the enabled state since I use onkeydown to enable the开发者_高级运维 function, the code is somewhat like this->

HTML:

<input type=text id=text1 onkeydown=myfunction(event)/>

Javascript:

function myfunction(event) {
  var EnterKeyPressed = verifyKeyPressed(event, 13);
  if (EnterKeyPressed == true) {
    //here is where i want to disable the text box
    fade(someotherOtherElement);
    //i want to re enable it here
  }
}

Basically its just a text box with onkeydown, when you normally type it keeps going on, but when you press enter (keyCode = 13) it verifies that with javascript event and if true , submits the value of the textbox after the fade. I want the entry to text to be disabled while fading as it results to a partial fade upon posting something else quickly after the first post. the element.disabled = true and after fade(), elem.disaled = false doesnt work

Use it's Id:

document.getElementById('text1').disabled = true;
document.getElementById('text1').disabled = false;

Or, give your input field a name, and make sure it's in a form (also with a name):

document.myForm.myField.disabled=true;
document.myForm.myField.disabled=false;

If you're already using jQuery, there is a nice and easy option using the .attr and .removeattr APIs, I use it to disable a submit button like this.

    $('#itemAdd').submit(function(){
        $('input[type=text]', this).attr('disabled', 'disabled');
    });

To enable the element again you can use

    $('#itemAdd').submit(function(){
        $('input[type=text]', this).removeAttr('disabled', 'disabled');
    });

API code is available here for .attr and here for .removiceattr

Here's a solution using jQuery:

http://jsfiddle.net/pxfunc/8te6c/

html:

<input type="text" id="text1" />

jQuery:

$("#text1").keydown(function(e) {
    var EnterKeyPressed = verifyKeyPressed(e, 13);
    if (EnterKeyPressed === true) {
        //here is where i want to disable the text box
        var that = this;
        that.disabled = true;

        $('#fadeMe').fadeOut(500, function() { // fadeOut's callback function
            //i want to re enable it here
            that.disabled = false;
        });
    }
});

Try this:

document.getElementById("text1").setAttribute("disabled", false);

It worked for me successfully

you said that

elem.disaled = false   

does not work

Try this:

 document.getElementById("elem")..removeAttribute('disabled');

Its worked for me