Question

当我们键入一些文字并点击添加@ 按钮光标移动到开始位置后，请参考下面的html和java脚本代码。我希望每当我点击时光标位于最后一个位置添加@ 按钮

＆＃13;

function insertUser(){
  jQuery("#htmlContent").append(" @");	          placeCaretAtEnd(document.getElementById("htmlContent"));
}


function placeCaretAtEnd(el) {

  el.focus();
  if (typeof window.getSelection != "undefined"
      && typeof document.createRange != "undefined") {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(true);
    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(atStart);
    textRange.select();
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

  <body>

    <div contenteditable mentio
         mentio-typed-term="typedTerm"
         mentio-macros="macros"
         mentio-require-leading-space="true"
         mentio-select-not-found="true"
         class="editor form-control"
         mentio-id="'htmlContent'"
         id="htmlContent"
         ng-model="htmlContent"
         ng-keyup="htmlContentKeyUp($event)"
         type="text" 

         onkeypress="return (this.innerText.length <= 300)" 
         style="height:60px; overflow-y:hidden;    border: 2px solid black;"
         >
    </div>

    <button aria-label="menu" onclick="insertUser()">Add @</button>
  </body>
</html>

＆＃13;

Answer 1

＆＃13;

<usercontrol:GenericTab >
</usercontrol:GenericTab>

＆＃13;

<Button Name="btn_Button" Content="{Binding ButtonText, Mode=OneWay }" Command="{Binding ClickCommand}" ></Button>

＆＃13;

这将把光标放在@

之前

Answer 2

function insertUser(){
  insertChar('@');
}

function insertChar(char) {
        var range = window.getSelection().getRangeAt(0);
        var sel = window.getSelection();
        if (range.startContainer.nodeType === Node.TEXT_NODE) {
			
            //~ range.startContainer.insertData(range.endOffset, char);
			var textNode = document.createTextNode(char);
			range.insertNode(textNode);
			
			range.setStart(textNode,1);
			range.setEnd(textNode,1);
			sel.removeAllRanges();
			sel.addRange(range);
        }
        jQuery("#htmlContent").focus();

    }

function placeCaretAtEnd(el) {

  el.focus();
  if (typeof window.getSelection != "undefined"
      && typeof document.createRange != "undefined") {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(true);
    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(atStart);
    textRange.select();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

  <body>

    <div contenteditable mentio
         mentio-typed-term="typedTerm"
         mentio-macros="macros"
         mentio-require-leading-space="true"
         mentio-select-not-found="true"
         class="editor form-control"
         mentio-id="'htmlContent'"
         id="htmlContent"
         ng-model="htmlContent"
         ng-keyup="htmlContentKeyUp($event)"
         type="text" 

         onkeypress="return (this.innerText.length <= 300)" 
         style="height:60px; overflow-y:hidden;    border: 2px solid black;"
         >
    </div>

    <button aria-label="menu" onclick="insertUser()">Add @</button>
  </body>
</html>

contenteditable div最后设置光标位置

2 个答案: