在前置和值之间设置焦点

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 + ':' + 'rrr');
    $('#workLogBtn').hide();
    $('textarea[id^="Oppgaver_"]').css('margin-top', '36px');
    return false;
  });

小提琴

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

插图

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 + ':' + 'rrr';  $('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 + ':' + 'rrr';
// 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 + ':' + 'rrr';  $('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>