使用JavaScript将光标置于文本输入元素中的文本末尾

2020/10/03 18:41 · javascript ·  · 0评论

将焦点设置到元素之后,通过JavaScript将光标放置在输入文本元素中文本末尾的最佳方法(我想是最简单的方法)是什么?

我在IE中遇到了同样的问题(通过RJS /原型设置焦点之后)。当该字段已有值时,Firefox已经将光标留在末尾。IE迫使光标移至文本的开头。

我得出的解决方案如下:

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

IE7和FF3均可使用

有一种简单的方法可以使它在大多数浏览器中运行。

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

但是,由于一些浏览器的怪癖,一个更具包容性的答案看起来像这样

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

使用jQuery (设置侦听器,但没有必要)

使用Vanilla JS addEvent从此答案借用功能


怪癖

Chrome有一个奇怪的怪癖,即在光标移到该字段之前触发焦点事件。这使我的简单解决方案搞砸了。解决此问题的两种方法:

  1. 您可以添加0毫秒的超时(以将操作推迟到清除堆栈为止
  2. 您可以将事件从更改focusmouseup除非您仍然关注焦点,否则这对于用户而言将是非常烦人的。我对这些选项都不是很喜欢。

此外,@ vladkras指出,某些较旧版本的Opera在有空格时会错误地计算长度。为此,您可以使用巨大的数字,该数字应大于字符串。

试试这个,它对我有用:

//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.  

为了使光标移到末尾,输入必须首先具有焦点,然后在更改值时将其移到末尾。如果将.value设置为相同,则chrome不会更改。

经过一番研究之后,我发现最好的方法是setSelectionRange在浏览器支持的情况下使用该功能。如果不是,请恢复使用Mike Berrow答案中的方法(即用自身替换值)。

scrollTop如果我们处于垂直滚动状态,我还设置了较高的值textarea(使用任意高的值似乎比$(this).height()Firefox和Chrome更可靠。)

我已经将它作为jQuery插件使用。(如果您不使用jQuery,我相信您仍然可以很容易地获得要点。)

我已经在IE6,IE7,IE8,Firefox 3.5.5,Google Chrome 3.0,Safari 4.0.4,Opera 10.00中进行了测试。

它可以作为PutCursorAtEnd插件jquery.com上使用为了您的方便,版本1.0的代码如下:

// 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>  

此功能在IE9,Firefox 6.x和Opera 11.x中对我有用

我在chrome上取得了很大的成功,尝试了以下方法

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

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

快速淘汰:

它采用类为重点的每个输入字段,然后将输入字段的旧值存储在变量中,然后将空字符串应用于输入字段。

然后等待1毫秒,然后再次放入旧值。

这是2019年,上面的方法都不适合我,但是这个方法确实有用,取自https://css-tricks.com/snippets/javascript/move-cursor-to-end-of-input/

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>

简单。编辑或更改值时,请先放置焦点,然后再设置值。

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

仍然需要中间变量(请参见var val =),否则光标的行为会很奇怪,我们最后需要它。

<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

此方法在一次调用中更新HTMLInputElement.selectionStart,selectionEnd和selectionDirection属性。

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLInputElement/setSelectionRange

在其他js方法中,-1通常意味着(到)最后一个字符。这也是这种情况,但我在文档中找不到对此行为的明确提及。

对于所有情况下的所有浏览器:

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

如果需要从onFocus事件处理程序中移动光标,则需要超时

我非常喜欢这个公认的答案,但是它在Chrome中停止工作了。在Chrome中,要使光标移至末尾,需要更改输入值。解决方法如下:

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

在jQuery中,

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

这个问题很有趣。最令人困惑的是,我发现没有解决方案可以完全解决问题。

+++++++解决方案+++++++

  1. 您需要一个JS函数,如下所示:

    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. 您需要在onfocus和onclick事件中将此人称为。

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

它适用于所有设备的浏览器!!!

我刚刚发现,在iOS中,settingtextarea.textContent属性每次都会将光标置于textarea元素中文本的末尾。该行为是我的应用程序中的错误,但似乎是您可以有意使用的东西。

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

采取一些答案..使单行jQuery的。

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

尝试使用适用于Vanilla JavaScript的这一功能。

<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中

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

如果输入字段仅需要静态默认值,则通常使用jQuery:

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

这似乎适用于所有浏览器。

尽管这可能是一个有很多答案的老问题,但我遇到了一个类似的问题,但所有答案都并非我想要的和/或解释得不好。selectionStart和selectionEnd属性的问题是输入类型号不存在它们(当询问文本类型时,我认为这可能会帮助其他可能需要关注其他输入类型的人)。因此,如果您不知道函数将要聚焦的输入类型是否是类型编号,则无法使用该解决方案。

跨浏览器并适用于所有输入类型的解决方案非常简单:

  • 获取并将输入值存储在变量中
  • 集中输入
  • 将输入值设置为存储值

这样,光标位于输入元素的末尾。

因此,您要做的就是这样(使用jquery,前提是可以通过clicked元素的data-focus-element数据属性访问希望聚焦的元素选择器,然后在单击.foo之后执行该函数。元件):

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

为什么这样做?简单地说,当调用.focus()时,焦点将添加到输入元素的开头(这是此处的核心问题),而忽略了输入元素中已经有一个值的事实。但是,当更改输入的值时,光标会自动放置在输入元素内值的末尾。因此,如果用先前在输入中输入的相同值覆盖该值,则该值看起来将保持不变,但是光标将移至末尾。

在文本区域单击时,将光标设置到文本的结尾。适用于Firefox,IE,Safari,Chrome。

在服务器端代码中:

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

用Javascript:

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

如果先设置该值,然后设置焦点,则光标将始终出现在末尾。

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

这是测试的小提琴
https://jsfiddle.net/5on50caf/1/

我想将光标放在contenteditable = true的“ div”元素的末尾,并得到了Xeoncross代码的解决方案

<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>

而此功能具有神奇的作用:

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

适用于大多数浏览器,请检查一下,此代码将文本放在div元素(而非输入元素)中并将焦点放在文本的末尾

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

谢谢Xeoncross

我也面临同样的问题。最终这对我有用:

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;

  });

};

我们可以这样称呼它:

var searchInput = $("#searchInputOrTextarea");

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

它适合我在Safari,IE,Chrome,Mozilla中使用。在移动设备上,我没有尝试过。

检查此解决方案!

//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>

超级简单(您可能必须专注于输入元素)

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

我之前尝试过这些建议,但没有一个对我有用(在Chrome中对它们进行了测试),所以我编写了自己的代码-并且它在Firefox,IE,Safari,Chrome中都可以正常工作...

在Textarea中:

onfocus() = sendCursorToEnd(this);

用Javascript:

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

是我的答案jsFiddle演示该演示使用CoffeeScript,但是如果需要,您可以将其转换为纯JavaScript

JavaScript中的重要部分:

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

我发布此答案是因为我已经为其他有相同问题的人写过答案。这个答案不像这里的最高答案那样涵盖很多极端情况,但是它对我有用,并且有一个jsFiddle演示可供您使用。

这是jsFiddle中的代码,因此即使jsFiddle消失了,这个答案也得以保留:

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

尝试以下代码:

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

虽然我回答的太迟了,但是对于将来的查询,这将有所帮助。它也可以在contenteditablediv中使用。

从哪里开始需要集中精力;编写此代码-

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

函数是-

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();
    }
}
本文地址:http://javascript.askforanswer.com/shiyongjavascriptjiangguangbiaozhiyuwenbenshuruyuansuzhongdewenbenmowei.html
文章标签:
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!