CODEWITHSUNDEEP
javascripthtmldom
Rizwan Khan
Rizwan Khan

Reputation: 401

How do i call a javascript function from a text field without submit button?

I have create a HTML page with some JavaScript code. Here is the code

   <script type="text/javascript">
     function doIt(){
        window.location = document.getElementById('url').value;
    }
   </script>
   <input type="text" id="url" />

I want that when some one press the enter after type the URL. The page redirect to the given URL automatically. How i can do this? Please suggest me some code

Upvotes: 0

Views: 5674

Answers (6)

Alex
Alex

Reputation: 35407

If your not using jQuery, the following is a complete example:

function addEvent(obj, type, fn) {
    if (obj.attachEvent) {
        obj['e' + type + fn] = fn;
        obj[type + fn] = function() {
            obj['e' + type + fn](window.event);
        }
        obj.attachEvent('on' + type, obj[type + fn]);
    } else obj.addEventListener(type, fn, false);
}

addEvent(window, 'load', function() {
    addEvent(document.getElementById('url'), 'keyup', function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);

        if (code == 13)
            window.location.href = this.value;
    });
});

Example - http://jsfiddle.net/4PDt4/

Credits for the addEvent code snippet: - http://ejohn.org/projects/flexible-javascript-events/

Upvotes: 1

dku.rajkumar
dku.rajkumar

Reputation: 18568

<input type="text" id="url" onblur="window.location.href='this.value'" />

the above is if the focus is taken out, like pressing tab

and then for enter, write onkeydown handler

<script type="text/javascript">
  document.getElementById('url').onkeydown = function(e) {
      var keyCode = e.keyCode || e.which;

     if (keyCode === 13) {
       window.location.href = this.value;
     }
 }


</script>

Upvotes: 1

Minko Gechev
Minko Gechev

Reputation: 25672

Here is solution: http://jsfiddle.net/YBLQx/1/

JS

(function () {

    var textField = document.getElementById('foo');

    function addHandler(el, event, handler) {
        if (el.addEventListener) {
            el.addEventListener (event, handler, false);
        } else if (el.attachEvent) {
            el.attachEvent (event, handler);
        }
    }

    addHandler(textField, 'keydown', textEntered);

    function textEntered(event) {
        if (event.keyCode === 13) {
            window.location = textField.value;
        }
    }
}());

HTML

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

Best regards!

Upvotes: 1

Umesh Patil
Umesh Patil

Reputation: 10695

Use below code:

<html>
<html>
<head>
<script type="text/javascript">
     function doIt(){     
       window.location.href = document.getElementById('url').value;
    }   
    document.onkeypress=function(e){
        var e=window.event || e;        
        if(e.keyCode===13) doIt();       
    }
</script>
</head>
<body>
<input type="text" id="url" value="http://www."/> 
</body>
</html>

Upvotes: 1

qiao
qiao

Reputation: 18219

see live demo at http://jsfiddle.net/qiao/RGqwD/2/

var input = document.getElementById('url');
input.onkeydown = function(e) {
  var key = e.keyCode || e.which;
    if (key == 13) {
      window.location = input.value;
    }
};

Upvotes: 1

Fantius
Fantius

Reputation: 3862

You need to attach a keypress event handler to the text box. In your event handler, you would check if the key pressed was enter. If so, do the redirect. Look up event handlers.

Upvotes: 0

Related Questions