Question

现在我正在检查所有的keydowns并寻找两个同时连字符。然后我在光标位置插入一个em破折号。但连字符仍然存在。（注意：insertEmdash函数是一个函数，用于插入我在网上找到的光标位置，我真的不明白它是如何工作的）

var prev_key = "";

$(window).keydown(function(event) {
  if(event.keyCode === 189) {
    prev_key === "-" ? insertEmdash() : prev_key = "-";  
  }
});

function insertEmdash() { 
  var sel, range, html;
  let time = "—";
  sel = window.getSelection();
  range = sel.getRangeAt(0); 
  range.deleteContents(); 
  var textNode = document.createTextNode(time);
  range.insertNode(textNode);
  range.setStartAfter(textNode);
  sel.removeAllRanges();
  sel.addRange(range);

  prev_key = "";        
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

Answer 1

这将检查--，textarea或input中的任何[contenteditable]，并将其替换为—。
即使光标不在内容的末尾，它也可以工作。

＆＃13;

document.getElementById('a').addEventListener('keyup', listener);
document.getElementById('b').addEventListener('keyup', listener); // does not work in IE or Edge, for some reason

function listener(e) {
  if (e.keyCode === 189 || e.keyCode === 109) {
    replaceHyphens(this);
  }
}

function replaceHyphens(el) {
  var sel = el.selectionStart || getCaretPosition(el),
    replaced = false;
  var key = (el.value ? 'value' : 'textContent');
  // replace any -- with —
  el[key] = el[key].replace(/-{2}/g, function(t) {replaced = true; return '—';});
  // fix the cursor position
  if (replaced) setCaretPosition(el, sel - 1);
}
// from http://stackoverflow.com/a/3976125 - gets the cursor position in a [contenteditable]
function getCaretPosition(editableDiv) {
  var caretPos = 0,
    sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      if (range.commonAncestorContainer.parentNode == editableDiv) {
        caretPos = range.endOffset;
      }
    }
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    if (range.parentElement() == editableDiv) {
      var tempEl = document.createElement("span");
      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
      var tempRange = range.duplicate();
      tempRange.moveToElementText(tempEl);
      tempRange.setEndPoint("EndToEnd", range);
      caretPos = tempRange.text.length;
    }
  }
  return caretPos;
}

function setCaretPosition(el, caret) {
  if (el.value) {
    el.setSelectionRange(caret, caret);
  } else {
    // from http://stackoverflow.com/a/6249440 - sets the cursor position in a [contenteditable]
    var tNode = el.firstChild;
    var range = document.createRange();
    range.setStart(tNode, caret);
    range.setEnd(tNode, caret);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  }
}

＆＃13;

<textarea id="a" rows="6" cols="30"></textarea>
<p contenteditable style="height:100px;width:230px;border:1px solid black" id="b"></p>

＆＃13;

事实证明，在contenteditable元素中获取和设置光标并不像在输入中那样简单。

Answer 2

我假设您想在输入元素上执行此操作，因此我使用了一个实现工作。我希望这些评论有助于理解代码的作用。

键码189对我来说也不起作用，但173对我有用。如果需要改变。

＆＃13;

var last_key_dash = false;

$("#text-input").keydown(function(event) {
  if(event.keyCode === 173) {	// 173 is '-' on my keyboard
    // If the previous key was '-'
    if (last_key_dash) {
      event.preventDefault();
      // Get text
      var text = $("#text-input").val();
      // Replace the trailing '-' with '—'
      $("#text-input").val(text.substr(0, text.length-1) + "—");
      /* setSelectionRange is here to set the cursor position at the end, because
         with the event being prevented, the browser doesn't update the cursor position when
         manipulating the text */
      $("#text-input")[0].setSelectionRange(text.length, text.length);
      last_key_dash = false;
      return;
    }
    last_key_dash = true;
  } else {
    last_key_dash = false;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text-input">

＆＃13;

Answer 3

这简化了一些事情。它将适用于任何接收字符输入的元素。

有关详细信息，请参阅内联评论：

var prevKeyCode = "";

$(window).keyup(function(event) { 
  // There are two keys on a standard keyboard that produce a hyphen character.
  // You must check for both.
  if(event.keyCode === 109 || event.keyCode === 189) {
    // If the current pressed key is a hyphen, call the replace function and pass
    // that function a reference to the element that the character was placed into
    prevKeyCode === 109 || prevKeyCode === 189 ? replace(event.target) : prevKeyCode = "-";  
  }
  
  // Store the pressed key for comparison on the next keystroke
  prevKeyCode = event.keyCode;
});

function replace(el){
  // Remove the last two characters from the element that received the key event
  el.value = el.value.substr(0, el.value.length - 2) + "—";
  
  // Now that the operation is done, reset the storage for new input
  prevKeyCode = "";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<textarea></textarea>

在运行中用短划线（“ - ”）替换两个连字符（“ - ”）？

3 个答案: