在前置和值之间设置焦点

时间:2017-03-23 13:06:40

标签: javascript focus prepend

方案: 按钮应将动态文本添加到已包含值的文本区域,然后在添加的文本后设置焦点。我无法在前置文本和之前的值之间添加焦点。

$('#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(),但它只将焦点放在textarea的末尾,而不是在添加文本之后。

$('#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

1 个答案:

答案 0 :(得分:0)

添加以下两个功能:

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

});
&#13;
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;}
&#13;
<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>
&#13;
&#13;
&#13;