0

How can I make the div get the focus and the focus is on the right side of the text? What I want is once you click the button, the div which is contenteditable' isfocus, and thefocus` is on the right side of the text Thanks :) I've tried the solution to the system's recommended problem, but it has an error

Failed to execute 'setStart' on 'Range': parameter 1 is not of type 'Node' ...

Muhammad Saad
  • 713
  • 1
  • 9
  • 31
WindByQT
  • 31
  • 1
  • 2
    What you have tried so far? – Nitin Dhomse Dec 15 '17 at 09:36
  • Possible duplicate of [How to set caret(cursor) position in contenteditable element (div)?](https://stackoverflow.com/questions/6249095/how-to-set-caretcursor-position-in-contenteditable-element-div) – sabithpocker Dec 15 '17 at 09:38
  • where is your code ....? – Bhargav Chudasama Dec 15 '17 at 09:39
  • Hello and welcome to StackOverflow. Please take some time to read the help page, especially the sections named ["What topics can I ask about here?"](https://stackoverflow.com/help/on-topic) and ["What types of questions should I avoid asking?"](https://stackoverflow.com/help/dont-ask). And more importantly, please read the [Stack Overflow question checklist](https://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist). You might also want to learn about [Minimal, Complete, and Verifiable Examples](https://stackoverflow.com/help/mcve). – Adriano Dec 15 '17 at 09:44
  • I have try all the solution what you can find in the google.Most of the solution are rewrite div's html after the div get the focus.But it doesn't work. – WindByQT Dec 15 '17 at 09:53

3 Answers3

1

$(window).on('load', (e) => { 
        $("#test").focus();
        var tmpStr = $("#test").val();
        $("#test").val('');
        $("#test").val(tmpStr);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="test" value="Hello there.." type="test" style="font-size:30px;width:250px;">
Gass
  • 7,536
  • 3
  • 37
  • 41
0

use direction property of css:

direction: rtl; text-align:right;

write a jquery code snipet

function rtl(element)
        {
            if(element.setSelectionRange){
                element.setSelectionRange(0,0);
            }
        }

<input type="text" onkey="rtl(this);" />

I Hope this will resolve your issue. This will show a slight movement of cursor on key input but this is the only way so far I know to resolve this.

M K Garwa
  • 495
  • 2
  • 13
  • It works half.It looks like the focus is on the right of the text,but if you enter something without click the div, the focus will run to the left of the text... – WindByQT Dec 15 '17 at 09:48
  • give text-align: right in css and dir="rtl" to the input field – M K Garwa Dec 15 '17 at 09:52
  • All the text is in the right of the div, and when you enter something without click the div, the focus still run to the left of the text... – WindByQT Dec 15 '17 at 09:58
  • The cursor movement depends on keyboard settings too. You can check by modify keyboard setting to Arabic also wether its working or not – M K Garwa Dec 15 '17 at 10:16
0
var el = document.getElementById('div');
if (el.innerText != '') {
    var textLength = el.lastChild.length;
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(el.lastChild, textLength);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
}
el.focus();
WindByQT
  • 31
  • 1