Select some text in an input field, but not all, when it is focused

Question

If I have a text field like <input type="text" name="summary" value="Summary: This is a test."> , is it possible to make it so that when the user clicks on the field, or uses Tab to reach it, that rather than select all of the text, only part of it is selected?

In this case, I'd like the This is a test part to be selected, so the user can immediately start typing to replace it with what they want.

Is this possible with JavaScript, and if necessary, some type of hack to make it work?

Unfortunately, I am quite limited by what other options I have in this case; typically, alternatives would be to place the Summary: outside the text box, for instance, so it can't be edited.

Answer 1

yes man it is possible... here I have an example that selects a part of your fields text...

$.fn.selectRange = function(start, end) {
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

$('input').selectRange(6,15);

http://jsfiddle.net/WpqsN/1972/

so you can use it like this:

$('input').click(function(){
    $('input').selectRange(6,15);
});

or

$('input').one('click',function(){
    $('input').selectRange(6,15);
});

to run only on FIRST click

Answer 2

Alright - this attempts creates an "uneditable" field name inside the <input> 's value. The reason it attempts but isn't completely successful is because it actually is editable, but if the user changes the field name, it tries to recover the value and restore the field name.

Here's the Javascript:

var Fields = {
  Seperator:":"
}

Fields.copyFieldName = function (element) {
  if (element.dataset.fieldname) {
    var seperatorIndex = Fields.findSeperator(element); 
    if (element.value.substring(0, seperatorIndex) !== element.dataset.fieldname) {
      var oldValue = element.value.substring(seperatorIndex + 1, element.value.length)
      element.value = element.dataset.fieldname + Fields.Seperator + oldValue;
    }
  }
};

Fields.findSeperator = function (element) {
  return element.value.indexOf(Fields.Seperator); 
}; 

Fields.selectInputValue = function (element) {
  if (element.type === "text") {
    if (element.setSelectionRange) {
      element.setSelectionRange(
        Fields.findSeperator(element) + 1, 
        element.value.length
      );
    } else if (element.createTextRange) {
      var range = element.createTextRange();
      range.moveStart("character", Fields.findSeperator(element) + 1);
      range.moveEnd("character", element.value.length);
      range.select();
    }
  }
};


$(document).ready(function () {
  $("input[data-fieldname]").each(function (index, element) {
    Fields.copyFieldName(element); 

    $(element).click(function () {
      Fields.copyFieldName(element);
      Fields.selectInputValue(this);
    });

    $(element).focusin(function (e) {
      e.preventDefault();
      Fields.copyFieldName(element);
      Fields.selectInputValue(this);
    }); 
  });
});

And HTML:

<input type="text" name="extra1" value="an extra field" />
<input type="text" name="summary" value="this is a test" data-fieldname="Summary" />
<input type="text" name="extra2" value="an extra field" />

Please note, I made a small modification to you field example. I use a data-* attribute to store the name of the field.

Here's a fiddle: http://jsfiddle.net/tFRD4/4/

Hope this helps!