Metin giriş öğesindeki metnin sonuna imleci yerleştirmek için JavaScript'i kullanma

Odak öğeye ayarlandıktan sonra, imleci JavaScript aracılığıyla bir giriş metin öğesindeki metnin sonuna yerleştirmenin en iyi yolu (ve en basit yolu varsayalım) nedir?

IE aynı (RJS / prototip üzerinden odak ayarladıktan sonra) aynı sorunla karşı karşıya. Alan için zaten bir değer olduğunda Firefox imleci sonunda bırakıyordu. IE imleci metnin başına zorluyordu.

Geldiğim çözüm şöyledir:

<input id="search" type="text" value="mycurrtext" size="30" 
       onfocus="this.value = this.value;" name="search"/>

Bu hem IE7 hem de FF3'te çalışır

Çoğu tarayıcıda çalışmasını sağlamanın basit bir yolu vardır .

this.selectionStart = this.selectionEnd = this.value.length;

Ancak, birkaç tarayıcının * tuhaflıkları nedeniyle, daha kapsayıcı bir cevap daha çok şuna benziyor

setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);

JQuery kullanma (dinleyiciyi ayarlamak için, ancak aksi halde gerekli değildir)

$('#el').focus(function(){
  var that = this;
  setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='el' type='text' value='put cursor at end'>

Vanilla JS kullanma ( bu cevaptan ödünç alma addEventfonksiyonu )

// Basic cross browser addEvent
function addEvent(elem, event, fn){
if(elem.addEventListener){
  elem.addEventListener(event, fn, false);
}else{
  elem.attachEvent("on" + event,
  function(){ return(fn.call(elem, window.event)); });
}}
var element = document.getElementById('el');

addEvent(element,'focus',function(){
  var that = this;
  setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});

<input id='el' type='text' value='put cursor at end'>

Gariplikleri

Chrome, imleç alana taşınmadan önce focus olayının tetiklendiği tuhaf bir tuhaflığa sahiptir; hangi benim basit bir çözüm benim vida. Bunu düzeltmek için iki seçenek:

1. 0 ms'lik bir zaman aşımı süresi ekleyebilirsiniz ( yığın temizlenene kadar işlemi ertelemek için )
2. Etkinliği olarak olarak focusdeğiştirebilirsiniz mouseup. Hala odak izlemediğiniz sürece bu kullanıcı için oldukça can sıkıcı olurdu. Bu seçeneklerin hiçbirine gerçekten aşık değilim.

Ayrıca, @vladkras, Opera'nın bazı eski sürümlerinin boşluk olduğunda uzunluğu yanlış hesapladığını belirtti. Bunun için dizenizden daha büyük olması gereken büyük bir sayı kullanabilirsiniz.

Bunu deneyin, benim için çalıştı:

//input is the input element

input.focus(); //sets focus to element
var val = this.input.value; //store the value of the element
this.input.value = ''; //clear the value of the element
this.input.value = val; //set that value back.  

İmlecin sonuna gelmesi için, önce girişin odaklanması gerekir, daha sonra değer değiştirildiğinde sona ulaşacaktır. .Value değerini aynı olarak ayarlarsanız, kromda değişmez.

Bu biraz hackledikten sonra setSelectionRange, tarayıcı destekliyorsa işlevi kullanmak için en iyi yol olduğunu buldum ; değilse, Mike Berrow'un cevabındaki yöntemi kullanmaya geri dönün (yani değeri kendisiyle değiştirin).

scrollTopDikey olarak kaydırılabilir olmamız durumunda da yüksek bir değere ayarlıyorum textarea. (Keyfi yüksek bir değer kullanmak $(this).height()Firefox ve Chrome'da olduğundan daha güvenilir görünüyor .)

Bir jQuery eklentisi olarak yaptım. (Eğer jQuery kullanmıyorsanız, yine de özü yeterince kolayca alabilirsiniz.)

IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, Opera 10.00'da test yaptım.

Jquery.com'da PutCursorAtEnd eklentisi olarak bulunur . Size kolaylık sağlamak için 1.0 sürümü kodu aşağıdaki gibidir:

// jQuery plugin: PutCursorAtEnd 1.0
// http://plugins.jquery.com/project/PutCursorAtEnd
// by teedyay
//
// Puts the cursor at the end of a textbox/ textarea

// codesnippet: 691e18b1-f4f9-41b4-8fe8-bc8ee51b48d4
(function($)
{
    jQuery.fn.putCursorAtEnd = function()
    {
    return this.each(function()
    {
        $(this).focus()

        // If this function exists...
        if (this.setSelectionRange)
        {
        // ... then use it
        // (Doesn't work in IE)

        // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
        var len = $(this).val().length * 2;
        this.setSelectionRange(len, len);
        }
        else
        {
        // ... otherwise replace the contents with itself
        // (Doesn't work in Google Chrome)
        $(this).val($(this).val());
        }

        // Scroll to the bottom, in case we're in a tall textarea
        // (Necessary for Firefox and Google Chrome)
        this.scrollTop = 999999;
    });
    };
})(jQuery);

<script type="text/javascript">  
    function SetEnd(txt) {  
      if (txt.createTextRange) {  
       //IE  
       var FieldRange = txt.createTextRange();  
       FieldRange.moveStart('character', txt.value.length);  
       FieldRange.collapse();  
       FieldRange.select();  
       }  
      else {  
       //Firefox and Opera  
       txt.focus();  
       var length = txt.value.length;  
       txt.setSelectionRange(length, length);  
      }  
    }   
</script>  

Bu işlev IE9, Firefox 6.x ve Opera 11.x'te benim için çalışıyor

Kromda oldukça büyük bir başarıyla aşağıdakileri denedim

$("input.focus").focus(function () {
    var val = this.value,
        $this = $(this);
    $this.val("");

    setTimeout(function () {
        $this.val(val);
    }, 1);
});

Hızlı özet:

Sınıfın odaklandığı her giriş alanını alır, ardından giriş alanının eski değerini bir değişkende saklar, daha sonra boş dizeyi giriş alanına uygular.

Sonra 1 milisaniye bekler ve eski değeri tekrar koyar.

2019 ve yukarıdaki yöntemlerden hiçbiri benim için işe yaramadı, ancak bu yöntem https://css-tricks.com/snippets/javascript/move-cursor-to-end-of-input/ adresinden alındı.

function moveCursorToEnd(id) {
  var el = document.getElementById(id) 
  el.focus()
  if (typeof el.selectionStart == "number") {
      el.selectionStart = el.selectionEnd = el.value.length;
  } else if (typeof el.createTextRange != "undefined") {           
      var range = el.createTextRange();
      range.collapse(false);
      range.select();
  }
}

<input id="myinput" type="text" />
<a href="#" onclick="moveCursorToEnd('myinput')">Move cursor to end</a>

Basit. Değerleri düzenlerken veya değiştirirken önce odağı koyun, ardından değeri ayarlayın.

$("#catg_name").focus();
$("#catg_name").val(catg_name);

Hala ara değişkene ihtiyaç vardır, (bkz. Var val =) aksi takdirde imleç garip davranır, sonunda buna ihtiyacımız vardır.

<body onload="document.getElementById('userinput').focus();">
<form>
<input id="userinput" onfocus="var val=this.value; this.value=''; this.value= val;"
         class=large type="text" size="10" maxlength="50" value="beans" name="myinput">
</form>
</body>

el.setSelectionRange(-1, -1);

https://codesandbox.io/s/peaceful-bash-x2mti

Bu yöntem, bir çağrıdaki HTMLInputElement.selectionStart, selectionEnd ve selectionDirection özelliklerini günceller.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange

Diğer js yöntemlerinde -1genellikle son karakter anlamına gelir. Bu durum için de durum böyle, ancak dokümanlardaki bu davranıştan açıkça bahsedemedim.

Tüm durumlar için tüm tarayıcılar için:

function moveCursorToEnd(el) {
    window.setTimeout(function () {
            if (typeof el.selectionStart == "number") {
            el.selectionStart = el.selectionEnd = el.value.length;
        } else if (typeof el.createTextRange != "undefined") {
            var range = el.createTextRange();
            range.collapse(false);
            range.select();
        }
    }, 1);
}

İmleci onFocus olay işleyicisinden taşımanız gerekirse zaman aşımı gerekir

Kabul edilen cevabı çok beğendim, ancak Chrome'da çalışmayı durdurdu. Chrome'da, imlecin sonuna gelmesi için giriş değerinin değiştirilmesi gerekiyor. Çözüm aşağıdaki gibidir:

<input id="search" type="text" value="mycurrtext" size="30" 
   onfocus="var value = this.value; this.value = null; this.value = value;" name="search"/>

JQuery'de bu

$(document).ready(function () {
  $('input').focus(function () {
    $(this).attr('value',$(this).attr('value'));
  }
}

Bu problem ilginç. Bu konuda en kafa karıştırıcı olan şey, bulduğum hiçbir çözümün sorunu tamamen çözmediğidir.

+++++++ ÇÖZÜM +++++++

1. Bunun gibi bir JS işlevine ihtiyacınız vardır:

   function moveCursorToEnd(obj) {
   
     if (!(obj.updating)) {
       obj.updating = true;
       var oldValue = obj.value;
       obj.value = '';
       setTimeout(function(){ obj.value = oldValue; obj.updating = false; }, 100);
     }
   
   }

2. Bu adamı onkocus ve onclick olaylarında çağırmanız gerekir.

   <input type="text" value="Test Field" onfocus="moveCursorToEnd(this)" onclick="moveCursorToEnd(this)">

TÜM CİHAZLARDA BİR TARAYICIDA ÇALIŞIYOR !!!!

İOS'ta, setting textarea.textContentözelliğinin imleci textarea öğesindeki metnin sonuna her seferinde yerleştireceğini buldum . Davranış, uygulamamda bir hataydı, ancak kasıtlı olarak kullanabileceğiniz bir şey gibi görünüyor.

var valsrch = $('#search').val();
$('#search').val('').focus().val(valsrch);

Bazı cevapları almak .. tek satır jquery yapmak.

$('#search').focus().val($('#search').val());

Giriş alanı sadece statik bir varsayılan değere ihtiyaç duyuyorsa bunu genellikle jQuery ile yaparım:

$('#input').focus().val('Default value');

Bu tüm tarayıcılarda işe yarıyor gibi görünüyor.

Bu çok sayıda yanıtı olan eski bir soru olsa da, benzer bir sorunla karşılaştım ve cevapların hiçbiri istediğim ve / veya zayıf bir şekilde açıklanmadı. SelectionStart ve selectionEnd özellikleriyle ilgili sorun, giriş türü numarası için mevcut olmamalarıdır (soru metin türü istendiğinde, odaklanması gereken diğer giriş türlerine sahip olabilecek diğerlerine yardımcı olabilir). Dolayısıyla, işlevin odaklanacağı giriş türünün bir tür sayı olup olmadığını bilmiyorsanız, bu çözümü kullanamazsınız.

Çapraz tarayıcı ve tüm giriş türleri için çalışan çözüm oldukça basittir:

• değişkenin girdi değerini alıp saklar
• girdiye odaklan
• giriş değerini saklanan değere ayarlama

Bu şekilde imleç giriş öğesinin sonunda olur.
Yani tek yapmanız gereken (jquery kullanarak, odaklanmak istediğiniz öğe seçiciye tıklanan öğenin 'data-focus-element' veri özniteliği ile erişilebilir olması ve '.foo' tıklandıktan sonra fonksiyonun yürütülmesi şartıyla) elemanı):

$('.foo').click(function() {
    element_selector = $(this).attr('data-focus-element');
    $focus = $(element_selector);
    value = $focus.val();
    $focus.focus();
    $focus.val(value);
});

Bu neden işe yarıyor? Basitçe, .focus () çağrıldığında, girdi öğesinin zaten içinde bir değere sahip olduğu gerçeğini göz ardı ederek, odak giriş elemanının başlangıcına eklenir (buradaki temel sorun). Ancak, bir girişin değeri değiştirildiğinde, imleç otomatik olarak giriş öğesinin içindeki değerin sonuna yerleştirilir. Bu nedenle, girişte daha önce girilmiş olan değerle aynı değeri geçersiz kılarsanız, değere dokunulmamış olarak görünür, ancak imleç sonuna kadar hareket eder.

Bunu deneyin Vanilya JavaScript ile çalışır.

<input type="text" id="yourId" onfocus=" let value = this.value; this.value = null; this.value=value" name="nameYouWant" class="yourClass" value="yourValue" placeholder="yourPlaceholder...">

Js cinsinden

document.getElementById("yourId").focus()

Metin alanını metnin sonuna tıklattığınızda imleci ayarlayın ... Bu kodun varyasyonu ... AYRICA çalışır! Firefox, IE, Safari, Chrome için.

Sunucu tarafı kodunda:

txtAddNoteMessage.Attributes.Add("onClick", "sendCursorToEnd('" & txtAddNoteMessage.ClientID & "');")

Javascript'te:

function sendCursorToEnd(obj) {
    var value =  $(obj).val(); //store the value of the element
    var message = "";
    if (value != "") {
        message = value + "\n";
     };
    $(obj).focus().val(message);
    $(obj).unbind();
 }

Önce değeri ve sonra odağı ayarlarsanız, imleç her zaman sonunda görünür.

$("#search-button").click(function (event) {
    event.preventDefault();
    $('#textbox').val('this');
    $("#textbox").focus();
    return false;
});

İşte test etmek için keman https://jsfiddle.net/5on50caf/1/

Ben imleci contenteditable = true nerede bir "div" öğesinin sonuna koymak istedim ve Xeoncross kodu ile bir çözüm var :

<input type="button" value="Paste HTML" onclick="document.getElementById('test').focus(); pasteHtmlAtCaret('<b>INSERTED</b>'); ">

<div id="test" contenteditable="true">
    Here is some nice text
</div>

Ve bu işlev sihir yapar:

 function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

Çoğu tarayıcı için iyi çalışır, lütfen kontrol edin, bu kod metni koyar ve div öğesindeki metnin sonuna odaklanır (giriş öğesi değil)

https://jsfiddle.net/Xeoncross/4tUDk/

Teşekkürler, Xeoncross

Aynı problemle de karşılaştım. Sonunda bu benim için çalışacak:

jQuery.fn.putCursorAtEnd =  = function() {

  return this.each(function() {

    // Cache references
    var $el = $(this),
        el = this;

    // Only focus if input isn't already
    if (!$el.is(":focus")) {
     $el.focus();
    }

    // If this function exists... (IE 9+)
    if (el.setSelectionRange) {

      // Double the length because Opera is inconsistent about whether a carriage return is one character or two.
      var len = $el.val().length * 2;

      // Timeout seems to be required for Blink
      setTimeout(function() {
        el.setSelectionRange(len, len);
      }, 1);

    } else {

      // As a fallback, replace the contents with itself
      // Doesn't work in Chrome, but Chrome supports setSelectionRange
      $el.val($el.val());

    }

    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Chrome)
    this.scrollTop = 999999;

  });

};

Buna şöyle diyebiliriz:

var searchInput = $("#searchInputOrTextarea");

searchInput
  .putCursorAtEnd() // should be chainable
  .on("focus", function() { // could be on any event
    searchInput.putCursorAtEnd()
  });

Safari, IE, Chrome, Mozilla'da benim için çalışıyor. Mobil cihazlarda bunu denemedim.

Bu çözümü kontrol edin!

//fn setCurPosition
$.fn.setCurPosition = function(pos) {
    this.focus();
    this.each(function(index, elem) {
        if (elem.setSelectionRange) {
            elem.setSelectionRange(pos, pos);
        } else if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    });
    return this;
};

// USAGE - Set Cursor ends
$('#str1').setCurPosition($('#str1').val().length);

// USAGE - Set Cursor at 7 position
// $('#str2').setCurPosition(7);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Set cursor at any position</p>
<p><input type="text" id="str1" value="my string here" /></p>
<p><input type="text" id="str2" value="my string here" /></p>

Süper kolay (giriş öğesine odaklanmanız gerekebilir)

inputEl = getElementById('inputId');
var temp = inputEl.value;
inputEl.value = '';
inputEl.value = temp;

Daha önce önerileri denedim ama hiçbiri benim için çalışmadı (Chrome'da test edildi), bu yüzden kendi kodumu yazdım - ve Firefox, IE, Safari, Chrome'da iyi çalışıyor ...

Textarea dilinde:

onfocus() = sendCursorToEnd(this);

Javascript'te:

function sendCursorToEnd(obj) { 
var value = obj.value; //store the value of the element
var message = "";
if (value != "") {
    message = value + "\n";
};
$(obj).focus().val(message);}

İşte cevabımın bir jsFiddle demosu . Demo CoffeeScript kullanıyor, ancak gerekirse düz JavaScript'e dönüştürebilirsiniz .

JavaScript'te önemli olan:

var endIndex = textField.value.length;
if (textField.setSelectionRange) {
   textField.setSelectionRange(endIndex, endIndex);
}

Bu cevabı gönderiyorum çünkü aynı soruya sahip başka birine yazdım. Bu cevap, burada en iyi cevaplar kadar çok sayıda durumu kapsamıyor, ancak benim için çalışıyor ve oynayabileceğiniz bir jsFiddle demosu var.

İşte jsFiddle kodu, bu yüzden jsFiddle yok olsa bile bu cevap korunur:

moveCursorToEnd = (textField) ->
  endIndex = textField.value.length
  if textField.setSelectionRange
    textField.setSelectionRange(endIndex, endIndex)

jQuery ->
  $('.that-field').on 'click', ->
    moveCursorToEnd(this)

<div class="field">
    <label for="pressure">Blood pressure</label>:
    <input class="that-field" type="text" name="pressure" id="pressure" value="24">
</div>
<p>
    Try clicking in the text field. The cursor will always jump to the end.
</p>

body {
    margin: 1em;
}

.field {
    margin-bottom: 1em;
}

Aşağıdaki kodu deneyin:

$('input').focus(function () {
    $(this).val($(this).val());
}).focus()

Çok geç cevap vermeme rağmen, ancak gelecekteki sorgulama için yardımcı olacaktır. Ve aynı zamandacontenteditable div olarak .

Sonunda odağı ayarlamanız gereken yerden; bu kodu yaz

var el = document.getElementById("your_element_id");
placeCaretAtEnd(el);

Ve fonksiyon -

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}