How can I set cursor into html text input field?

Question

For a Flask app I am trying to set the cursor into an input text field in a form. The form looks like this:

<form method="get" autocomplete="off">
        <div class="row">
            <div class="four columns">
                <label for="from-currency">Exchange:</label>
                <input type="text" placeholder="currency to exchange from" value="{{ from_curr }}" name="from_currency" id="from-currency" class="input-field"/>
            </div>
            <div class="four columns">
                <label for="to-currency">To:</label>
                <input type="text" placeholder="currency to exchange to" value="{{ to_curr }}" name="to_currency" id="to-currency" class="input-field"/>
            </div>
            <div class="four columns">
                <label for="calculate-button">&nbsp;</label>
                <input type="submit" value="Calculate" id="calculate-button" class="input-field">
            </div>
        </div>
    </form>

I tried using JavaScript (element.focus();), but it did not move the cursor into my input field.

<script>
    function submit_param(inp) {
        inp.addEventListener("input", function(event) {
            var val = this.value;
            var urlParams = new URLSearchParams(window.location.search);
            urlParams.set(inp.name, val);
            var queryString = urlParams.toString();
            history.pushState({}, "", "?"+queryString);
            location.reload();
            inp.focus();
        });
    }
    submit_param(document.getElementById("from-currency"));
    submit_param(document.getElementById("to-currency"));
</script>

What am I doing wrong, or how else can I move the cursor back into the input filed at the end of my script block?

I think the problem is that you call inp.focus(); after you reload/refresh the page. — Titus
– Titus, Commented Nov 24, 2019 at 20:45

Harshal Parekh · Accepted Answer · 2019-11-24 19:55:17Z

1

How can I set cursor into html text input field?

<input type="text" autofocus>

The autofocus attribute is a boolean attribute.

When present, it specifies that an element should automatically get focus when the page loads.

Hope this helps. Good luck.

answered Nov 24, 2019 at 19:55

Harshal Parekh

6,0374 gold badges25 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I set cursor into html text input field?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related