Metro1337
Metro1337

Reputation: 157

HTML AutoFocus in a input field with value

first, if anyone has another more specific and better title for this question please tell me and I'll change. I've never been good at using Google so...

I'm currently using following code to create an input field

<input name="igname" type="text" maxlength="40" autofocus="autofocus" value="Hi">

It works fine, but there's just one problem -> the cursor is on the left, I want it to be on the right but I don't have any idea how to do so.

Thanks in advance

Upvotes: 1

Views: 3171

Answers (2)

JoDev
JoDev

Reputation: 6873

First idea

Use style='text-align:right' to change the text align.

PUT THE CURSOR TO THE END

To put the cursor to the end of editable element, use this : tested function | fiddle
For the fiddle, it works great on Chrome, but in FF, you have to give focus to the element because the IFRAME haven't got focus by default!

moveCursorToEnd = function(el, focused) {
console.log('go');
if (typeof el.selectionStart == "number") {
    el.selectionStart = el.selectionEnd = el.value.length;
} else if (typeof el.createTextRange != "undefined") {
    if(!focused)
        el.focus();
    var range = el.createTextRange();
    range.collapse(false);
    range.select();
}
if(!focused)
    el.focus();
}

onbodyload = function() {
    elem = document.getElementById('totheend');
    moveCursorToEnd(elem);
}
<body onload='onbodyload()'>...
<input class='totheend' onfocus="if(typeof moveCursorToEnd != 'undefined') moveCursorToEnd(this, true)" name="igname" type="text" maxlength="40" autofocus="autofocus" value="Hi" >

Upvotes: 0

frank
frank

Reputation: 435

JoDev's answer does not seem to work with FF and could be simplified. el is the DOM element representing the input.

function moveCursorToEnd(el) {
    'use strict';
    var index=el.value.length;
    el.focus();
    el.setSelectionRange(index,index);
}

Upvotes: 2

Related Questions