在前缀和值之间设置焦点

Question

场景：按钮应该将动态文本添加到已经包含值的文本区域，然后在添加的文本之后设置焦点。我无法在前置文本和先前值之间成功添加焦点。

$('#workLogBtn').click(function(){
    // $('textarea[id^="Oppgaver_"]').prepend(timeSignature).focus();

    $('textarea[id^="Oppgaver_"]').val(function(i, text) {
        return timeSignature + text;
    });

    $('#workLogBtn').hide().fadeOut( 1000 );
    $('textarea[id^="Oppgaver_"]').css('margin-top', '63px');
    return false;
  });

我已经尝试过 prepend 和 val()，但它只将焦点放在文本区域的末尾，而不是在添加文本之后。

$('#workLogBtn').click(function(){
    $('textarea[id^="Oppgaver_"]').prepend(currenttimeStamp + ', ' +  timeStamp.getHoursTwoDigits() + ':' + timeStamp.getMinutesTwoDigits() + ' - '  + signedByUser + ':' + '\r\r\r');
    $('#workLogBtn').hide();
    $('textarea[id^="Oppgaver_"]').css('margin-top', '36px');
    return false;
  });

Fiddle

下面的解决方案有效。但是当我将它添加到 SharePoint 站点时，它在放置插入符的位置上表现得有点不自然。我不明白计数从哪里开始。 -3 很重要，但如果我写 -0 它仍然会在文本中间结束。

Illustration

Answer 1

添加这两个函数：

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  } else if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
  }
}

function setCaretToPos(input, pos) {
  setSelectionRange(input, pos, pos);
}

并按如下方式修改您的点击处理程序：

$('#workLogBtn').click(function(){
    var newString=currenttimeStamp + ', ' +  timeStamp.getHoursTwoDigits() + ':' + timeStamp.getMinutesTwoDigits() + ' - '  + signedByUser + ':' + '\r\r\r';  $('textarea[id^="Oppgaver_"]').prepend(newString);
    $('#workLogBtn').hide();
    $('textarea[id^="Oppgaver_"]').css('margin-top', '36px');
    setCaretToPos($('textarea[id^="Oppgaver_"]')[0], newString.length-1)
    return false;
  });

这是一个片段：

$(document).ready(function(){

// CSS:ADD
$('textarea[id^="Oppgaver_"]').css("width", "800px");
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// USER:GET
     var signedInUser = document.getElementById('zz5_Menu').innerHTML;   
     var end = signedInUser.indexOf('<'); 
     var signedByUser = signedInUser.substring();

// DATE:FORMAT
    Date.prototype.getHoursTwoDigits = function(){var retval = this.getHours();if (retval < 10){return ("0" + retval.toString());}else{return retval.toString();}}
    Date.prototype.getMinutesTwoDigits = function(){var retval = this.getMinutes();if (retval < 10){return ("0" + retval.toString());}else{return retval.toString();}}
    var timeStamp = new Date();
    function pad(n) {return n < 10 ? "0"+n : n;}
    var currenttimeStamp = [pad(timeStamp.getDate()), pad(timeStamp.getMonth()+1), timeStamp.getFullYear()].join('.'); 
    var timeSignature = currenttimeStamp + ', ' +  timeStamp.getHoursTwoDigits() + ':' + timeStamp.getMinutesTwoDigits() + ' - '  + signedByUser + ':' + '\r\r\r';

// BUTTON:PREPEND
    $('textarea[id^="Oppgaver_"]').before( '<p><button id="workLogBtn">Signer</button></p>' );

// BUTTON:ACTION
    function setSelectionRange(input, selectionStart, selectionEnd) {
      if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(selectionStart, selectionEnd);
      } else if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
      }
    }
    
    function setCaretToPos(input, pos) {
      setSelectionRange(input, pos, pos);
    }

    $('#workLogBtn').click(function(){
      var newString=currenttimeStamp + ', ' +  timeStamp.getHoursTwoDigits() + ':' + timeStamp.getMinutesTwoDigits() + ' - '  + signedByUser + ':' + '\r\r\r';  $('textarea[id^="Oppgaver_"]').prepend(newString);
        $('#workLogBtn').hide();
        $('textarea[id^="Oppgaver_"]').css('margin-top', '36px');
        setCaretToPos($('textarea[id^="Oppgaver_"]')[0], newString.length-3)
        return false;
      });

});

textarea {width:600px;height:600px;border:0px;border-radius:4px;padding:20px;margin:0 0 0 20px;color:#444;}

#workLogBtn, #workLogBtn:visited {padding:4px 10px;text-decoration:none;margin:10px 20px; background:green;color:#fff;border-radius:4px;display:inline-block;border:0px;}
#workLogBtn:hover {color:#444;background:#fff;}
#zz5_Menu {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a id="zz5_Menu">Eliassen, John-Eilif</a>

<textarea id="Oppgaver_f3cf5190-9ce6-459b-808c-4a832ee9a559_$TextField">
17.03.2017, 10:37 - Eliassen, John-Eilif:
Oppgradering fra v 6.20.3185 til 6.20.3215

17.03.2017, 10:37 - Eliassen, John-Eilif:
Oppgradering fra v 6.20.3185 til 6.20.3215
</textarea>

在前缀和值之间设置焦点

Set focus between prepend and value

javascript

focus

prepend