当输入框获得焦点时，选择其中一部分文本而不是全部文本

Question

当输入框获得焦点时，选择其中一部分文本而不是全部文本

3

如果我有一个文本框，如<input type="text" name="summary" value="Summary: This is a test.">，是否可以使用户在单击该字段或使用 Tab 到达它时，不会选择所有文本，而只能选择部分文本呢？

在这种情况下，我想选择This is a test部分，这样用户就可以立即开始输入以替换它。

这是否可以用 JavaScript 实现，如果必要，可以通过某种类型的技巧来实现？

不幸的是，在这种情况下，我的其他选项非常有限；通常，替代方案是将 Summary: 放在文本框外面，这样就无法编辑。

- Gary

你只需要选择，还是需要让用户无法更改“摘要：”部分？ - jdphenix

不，只是选择就可以了。用户可以更改“摘要”部分。虽然我很想看看你能想出什么解决方案来保持“摘要”部分不可编辑！（除非是通过将该部分保留在文本框之外的方式来实现。） - Gary

Gary，这是不可能的......如果你禁用输入，你将无法编辑文本的任何部分......你不能只禁用一部分文本。 - Lugarini

@Thiago 说某事不可能是太过字面，我认为可以模拟出“足够接近”的行为。 - jdphenix

我明白了。我想知道的是，你为什么需要这个。“摘要:”部分是否需要原样发送到服务器？还是只是出于好奇？ - jdphenix

显示剩余5条评论

2个回答

1

好的 - 这个尝试在 <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);
    }); 
  });
});

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

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

这是一个示例：http://jsfiddle.net/tFRD4/4/ 希望这可以帮到您！

- jdphenix

1

当我在“摘要：”字段中输入时，“摘要：”部分确实无法编辑，但我只能在该字段中输入最多1个字符。因此，它最终看起来像“摘要：a”，我键入的任何其他字符都会替换最后一个字符，因此最终看起来像“摘要：b”等。 - Gary

@Gary 哎呀，已经更新并修复了。我绑定到了焦点并阻止了它的默认行为（如果你不这样做，大多数浏览器会选择字段中的所有文本）。 - jdphenix

它似乎仍在这样做，至少在 Fiddle 中是这样的。 - Gary

1

新的fiddle：http://jsfiddle.net/tFRD4/4/，非常抱歉，这个jsFiddle显然不够强大，呵呵 :) - jdphenix

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lugarini · Accepted Answer

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

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

仅在第一次点击时运行