Append input with defined text in textfield

Question

What I'm trying to do is to append .com in textfield during user input. Textfield will be empty and .com will be shown during typing domain name. Here is my not working code:

HTML

Enter domain name: <input type="text" id="domain">

Javascript

$(document).ready(function(){
  $("input").keypress(function(){
    $("#domain").val(this.value + ".com");
  });
});

Not working demo: http://jsfiddle.net/UUzux/25/

Thanks in advance.

better solution to add `.com` in other control or at least on blur with checking existing `.com` in the end — Kirill Pisarev, Jan 23 '15 at 13:21
I think it would be clearer UX design to have a `.com` label after the text box to indicate that `.com` is included. — Phylogenesis, Jan 23 '15 at 13:23
What happens if the user wants to specify a `.org`, `.tv`, `.co.uk` (and so on...) TLD instead? — David Thomas, Jan 23 '15 at 13:27
This might be helpful if you are using jQuery: http://stackoverflow.com/questions/13242967/append-text-to-end-of-text-box-dynamically-with-jquery — Soley, Jan 23 '15 at 13:29

score 2 · Accepted Answer · edited May 23 '17 at 11:43

I thought this was a great question. For a sleek solution, you could use the following code taken from

Set keyboard caret position in html textbox

to manually set the caret position in the input field:

function setCaretPosition(elemId, caretPos) {
    var el = document.getElementById(elemId);

    el.value = el.value;

    if (el !== null) {

        if (el.createTextRange) {
            var range = el.createTextRange();
            range.move('character', caretPos);
            range.select();
            return true;
        } else {
            if (el.selectionStart || el.selectionStart === 0) {
                el.focus();
                el.setSelectionRange(caretPos, caretPos);
                return true;
            } else { // fail
                el.focus();
                return false;
            }
        }
    }
}

And then you'd implement it as follows:

$("input").keyup(function () {
    var val = $("#domain").val();

    val = val.replace(/\..*/g, ''); // replace this with whatever regex you need to deny whatever input you want.
    $("#domain").val(val + ".com");

    var caretPos = val.length;
    var elemId = "domain";

    setCaretPosition(elemId, caretPos);
});

Which will take anything after any . character out of the string, replace it each time with '.com' (you can replace this regex to handle whatever you need), and then set the cursor position to right before the '.com'

JSFiddle Demo

Also, to enable editing in the middle of the string you'd have to get the caret position. There's a stackoverflow question here

Get cursor position (in characters) within a text Input field

With good examples. I modified one of the answers as follows:

getCaretPosition = function (elemId) {
    var input = $('#' + elemId);
    if (!input) return; // No (input) element found
    if ('selectionStart' in input[0]) {
        // Standard-compliant browsers
        return input[0].selectionStart;
    } else if (document.selection) {
        // IE
        input.focus();
        var sel = document.selection.createRange();
        var selLen = document.selection.createRange().text.length;
        sel.moveStart('character', -input.value.length);
        return sel.text.length - selLen;
    }
}

And then your jQuery would look like this:

$("input").keyup(function () {
    var val = $("#domain").val();
    var elemId = "domain";

    var caretPos = getCaretPosition(elemId);

    val = val.replace(/\..*/g, '');
    $("#domain").val(val + (val ? ".com" : ""));

    setCaretPosition(elemId, caretPos);
});

Updated Fiddle with that implementation.

I never thought it's gonna be this complex. Thank you very much for your time to code and explain to me. Regex is giving me problem because the .com keeps adding itself every time I type so I suppress special char with the keyboard input instead. Here's the updated js: http://jsfiddle.net/UUzux/43/ Thanks again. — sg552, Jan 24 '15 at 20:15

Naeem Shaikh · Answer 2 · 2015-01-23T13:37:51.263

1

maybe this would help you. http://jsfiddle.net/naeemshaikh27/UUzux/35/

$(document).ready(function(){
    var prevText;
  $("input").keyup(function(e){
      var str=$("input").val().replace(".com", "");

 str=str+'.com'

      $("#domain").val( str );

  });
});

well here is the updated one: http://jsfiddle.net/naeemshaikh27/UUzux/39/

But still looks aweful without caret moved

edited Jan 23 '15 at 13:37

answered Jan 23 '15 at 13:30

Naeem Shaikh

15,331
6
50
88

without movind caret it looks awful – Kirill Pisarev Jan 23 '15 at 13:32
Also doesn't allow you to correct errors with backspace. – Phylogenesis Jan 23 '15 at 13:33
I will try to implement it. Thank you. – sg552 Jan 23 '15 at 13:41

score 1 · Answer 3 · edited May 23 '17 at 10:26

You could try this

$(document).ready(function () {
    $("input").keyup(function (e) {
        var kcode;
        if (!e){
            var e = window.event;
        }

        if (e.keyCode){
            kcode = e.keyCode;
        }
        else if (e.which){ 
            kcode = e.which;
        }

        if (kcode == 8 || kcode == 46){
            return false;
        }

        this.value = this.value.replace('.com', '');

        $("#domain").val(this.value + ".com");

        var curpos = this.createTextRange();
        curpos.collapse(true);
        curpos.moveEnd('character', this.value.length - 4);
        curpos.select();
    });
});

I had to borrow some code from Joel on this post regarding disabling the backspace and delete keys. Just as he states in his post be careful using e.keyCode because not all browsers use it, some use e.Which.

JsFiddle Demo

Update: link to full list of key codes.

I use bowheart solution but thanks for the key codes list. Help me with integrating with his solution. Thank you — sg552, Jan 24 '15 at 20:16

Append input with defined text in textfield

3 Answers3