Question

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

在这种情况下，我希望选择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/

希望这有帮助！

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

2 个答案: