导致光标在 .keyup 上跳转的函数参数答案

【问题标题】：Function param causing cursor to jump on .keyup导致光标在 .keyup 上跳转的函数参数
【发布时间】：2017-02-15 14:15:34
【问题描述】：

我有这个函数，假设通过 diff textarea 传递数据，但是光标一直跳到文本的末尾。

function KeepReferencesInSync(referenceInput) {
  $(referenceInput).keyup(function () {
    $("input[name=Reference]").val($(this).val());
  }
)}

【问题讨论】：

你能解释一下吗？
请提供minimal reproducible example
用户将根据他们单击的单选按钮“更改”参考文本区域。这个想法是让 textarea 看起来像一个单独的字段，通过不同的选项携带数据。
似乎在其他浏览器上工作得很好。问题出在 Chrome 上。
设置输入字段的值确实会移动光标，您必须使用选择 API 记住光标位置并在修改输入后重新设置。请格式化您的代码，让我们在您之后进行清理有点粗鲁，以便我们尽力帮助您。

标签： javascript jquery html google-chrome jquery-ui

【解决方案1】：

我有一个解决方案。

我需要记录光标位置并设置 [setSelectionRange] 以确保光标不会跳跃。见下文。

function KeepReferencesInSync(referenceInput) {
    $(referenceInput).on('keyup', function () {

        //get selection position
        var start = this.selectionStart,
        end = this.selectionEnd;

        $("input[name=Reference]").val($(this).val());

        //set the range
        this.setSelectionRange(start, end);
    })
}

【讨论】：

【解决方案2】：

您可以尝试这种方法。这不是最先进的，但很有效。

// Create a list of zone/input/ele
var zoneList = [$('#zone1'),$('#zone2'),$('#zone3')];

// For each zone
$.each(zoneList, function(index, zoneForEvent){
    // Attach keyup event
    zoneForEvent.on('keyup',function(){
        // Get root zone info who trigger event
        var rootZoneId = this.id;
        var rootZoneValue = this.value;
        // Loop on each zone
        $.each(zoneList, function(index, zoneDestination){
            // If zone destination is not root zone
            if (zoneDestination.id !== rootZoneId) {
                // Copy value of root element
                zoneDestination.val(rootZoneValue);
            }
        });       
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="zone1"></textarea>
<input type="text" id="zone2"></input>
<textarea id="zone3"></textarea>

【讨论】：