在聚焦时，在输入字段中选择一些文本，但不是全部

Question

如果我有一个文本字段，如<input type="text" name="summary" value="Summary: This is a test."> ，是否可以使用当用户点击该字段或使用时选项卡到达它，而不是选择所有文本，只选择其中的一部分？

在这种情况下，我希望This is a test要选择This is a test部分，因此用户可以立即开始输入以将其替换为他们想要的内容。

这是否可以使用JavaScript，如果有必要，可以使用某种类型的hack来使其工作？

不幸的是，我对这种情况下的其他选择非常有限; 通常，替代方案是将Summary:放在文本框之外，因此无法编辑。

Answer 1

是的，这是可能的...这里我有一个例子，选择你的领域文本的一部分......

$.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/

所以你可以像这样使用它：

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

要么

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

仅在第一次点击时运行

Answer 2

好吧 - 这次尝试在<input>的值中创建了一个“不可编辑的”字段名称。 它尝试但未完全成功的原因是因为它实际上是可编辑的，但如果用户更改了字段名称，它会尝试恢复该值并恢复字段名称。

这是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);
    }); 
  });
});

和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" />

请注意，我对你的字段示例做了一个小修改。 我使用data-*属性来存储字段的名称。

这是一个小提琴： http ： //jsfiddle.net/tFRD4/4/

希望这可以帮助！