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

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

本文关键字：全部 聚焦 选择 字段 文本 输入      更新时间：2023-09-26

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

在本例中，我希望选择This is a test部分，以便用户可以立即开始输入以替换为他们想要的内容。

这是可能的JavaScript，如果有必要，某种类型的黑客使其工作?

不幸的是，在这种情况下，我的其他选择非常有限;通常，替代方法是将Summary:放在文本框之外，例如，这样它就不能被编辑了。

是的，这是可能的…这里我有一个例子，选择你的字段文本的一部分…

$.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);
});

只在第一次运行，点击

好的-这将尝试在<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/

希望这对你有帮助!

相关文章：