Javascript 在javascript替换中停止光标跳到输入字段的末尾
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8219639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop cursor from jumping to end of input field in javascript replace
提问by Petey B
I'm using a regular expression to strip invalid characters out of an text input area in javascript (running in IE). I run the replace function on every keyup event. However, this makes the cursor jump to the end of the text box after each keypress, which makes inline editing impossible.
我正在使用正则表达式从 javascript 中的文本输入区域中去除无效字符（在 IE 中运行）。我在每个 keyup 事件上运行替换功能。但是，这会使光标在每次按键后跳转到文本框的末尾，从而无法进行内联编辑。
Here is it in action:
这是它的行动：
Does anyone know how to make it so the cursor does not jump to the end of the input box?
有谁知道如何使光标不会跳到输入框的末尾？
采纳答案by gilly3
You'll have to manually put the cursor back where you want it. For IE9, set .selectionStartand .selectionEnd(or use .setSelectionRange(start, end)). For IE8 and earlier, use .createTextRange()and call .moveStart()on the text range.
您必须手动将光标放回您想要的位置。对于 IE9，设置.selectionStart和.selectionEnd（或使用.setSelectionRange(start, end)）。对于 IE8 及更早版本，使用.createTextRange()并调用.moveStart()文本范围。
回答by Josh Crozier
In addition to gilly3's answer, I thought someone might find it useful to see an actual code snippet.
除了gilly3的回答之外，我认为有人可能会发现查看实际代码片段很有用。
In the example below, the selectionStartproperty is retrieved from the inputelement prior to the JavaScript string manipulation. Then selectionStartis set back to the initial position afterthe manipulation.
在下面的示例中，selectionStart属性是input在 JavaScript 字符串操作之前从元素中检索的。然后在操作后selectionStart设置回初始位置。
Depending on what you're trying to achieve, you could also access selectionEndin place of selectionStart, and set a range: setSelectionRange(start, end).
根据您要实现的目标，您还可以访问selectionEnd代替selectionStart，并设置范围：setSelectionRange(start, end)。
document.getElementById('target').addEventListener('input', function (e) {
var target = e.target,
position = target.selectionStart; // Capture initial position
target.value = target.value.replace(/\s/g, ''); // This triggers the cursor to move.
target.selectionEnd = position; // Set the cursor back to the initial position.
});<p>The method <code>.replace()</code> will move the cursor's position, but you won't notice this.</p>
<input type="text" id="target" />回答by Mike
I was running into the same issue, I found https://www.sitepoint.com/6-jquery-cursor-functions/had the solution. here are 6 methods that will allow you to get/set the cursor position in an input/textarea. I believe this will work for content editable fields as well!
我遇到了同样的问题，我发现https://www.sitepoint.com/6-jquery-cursor-functions/有解决方案。这里有 6 种方法可以让您获取/设置输入/文本区域中的光标位置。我相信这也适用于内容可编辑字段！
This was very helpful as the bug only showed for IE and Windows 7 combination.
这非常有用，因为该错误仅针对 IE 和 Windows 7 组合显示。
Here is my Before code
这是我之前的代码
$body.on('input paste','.replace-special-chars',function () {
let coma = /?/g;
let doubleQuotes = /[“”]/g;
let singleQuotes = /[‘']/g;
$(this).val($(this).val().replace(doubleQuotes,'"'));
$(this).val($(this).val().replace(coma,','));
$(this).val($(this).val().replace(singleQuotes,"'"));
$(this).val($(this).val().replace(/[^\x00-\xff]/g, '- '));
});
and my after code which utilizes the jquery methods that I found on the website I stated above
和我的后代码，它利用了我在上面提到的网站上找到的 jquery 方法
$body.on('input paste','.replace-special-chars',function () {
let position = $(this).getCursorPosition();
let coma = /?/g;
let doubleQuotes = /[“”]/g;
let singleQuotes = /[‘']/g;
$(this).val($(this).val().replace(doubleQuotes,'"'));
$(this).val($(this).val().replace(coma,','));
$(this).val($(this).val().replace(singleQuotes,"'"));
$(this).val($(this).val().replace(/[^\x00-\xff]/g, '- '));
$(this).setCursorPosition(position);
});
