Show a caret in a custom textarea without displaying its text

I have a custom textarea. In this example, it makes the letters red or green, randomly.

var mydiv = document.getElementById('mydiv'),
    myta = document.getElementById('myta');
function updateDiv() {
  var fc;
  while (fc = mydiv.firstChild) mydiv.removeChild(fc);
  for (var i = 0; i < myta.value.length; i++) {
    var span = document.createElement('span');
    span.className = Math.random() < 0.5 ? 'green' : 'red';
    span.appendChild(document.createTextNode(myta.value[i]));
    mydiv.appendChild(span);
  }
};
myta.addEventListener('input', updateDiv);
body { position: relative }
div, textarea {
  -webkit-text-size-adjust: none;
  width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font: 1rem sans-serif;
  padding: 2px;
  margin: 0;
  border-radius: 0;
  border: 1px solid #000;
  resize: none;
}
textarea {
  position: absolute;
  top: 0;
  color: transparent;
  background: transparent;
}
.red { color: #f00 }
.green { color: #0f0 }
<div id="mydiv"></div>
<textarea id="myta" autofocus=""></textarea>

只需插入你自己的脱字符!

function blink() {
  document.getElementById('caret').hidden ^= 1;
  blinkTimeout = setTimeout(blink, 500);
}
var mydiv = document.getElementById('mydiv'),
    myta = document.getElementById('myta'),
    blinkTimeout = setTimeout(blink, 500),
    lastSelectionStart = 0,
    lastSelectionEnd = 0,
    whichSelection = true;
function updateDiv() {
  var fc;
  while (fc = mydiv.firstChild) mydiv.removeChild(fc);
  if (myta.selectionStart != lastSelectionStart) {
    lastSelectionStart = myta.selectionStart;
    whichSelection = false;
  }
  if (myta.selectionEnd != lastSelectionEnd) {
    lastSelectionEnd = myta.selectionEnd;
    whichSelection = true;
  }
  var cursorPos = whichSelection ? myta.selectionEnd : myta.selectionStart;
  for (var i = 0; i < myta.value.length; i++) {
    if (i == cursorPos) {
      var caret = document.createElement('span');
      caret.id = 'caret';
      caret.appendChild(document.createTextNode('xA0'));
      mydiv.appendChild(caret);
      clearTimeout(blinkTimeout);
      blinkTimeout = setTimeout(blink, 500);
    }
    var span = document.createElement('span');
    span.className = Math.random() < 0.5 ? 'green' : 'red';
    span.appendChild(document.createTextNode(myta.value[i]));
    mydiv.appendChild(span);
  }
  if (myta.value.length == cursorPos) {
    var caret = document.createElement('span');
    caret.id = 'caret';
    caret.appendChild(document.createTextNode('xA0'));
    mydiv.appendChild(caret);
    clearTimeout(blinkTimeout);
    blinkTimeout = setTimeout(blink, 500);
  }
};
myta.addEventListener('input', updateDiv);
myta.addEventListener('focus', updateDiv);
myta.addEventListener('mousedown', function() {
  setTimeout(updateDiv, 0);
});
myta.addEventListener('keydown', function() {
  setTimeout(updateDiv, 0);
});
myta.addEventListener('blur', function() {
  document.getElementById('caret').hidden = true;
  clearTimeout(blinkTimeout);
});
body { position: relative }
div, textarea {
  -webkit-text-size-adjust: none;
  width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font: 1rem sans-serif;
  padding: 2px;
  margin: 0;
  border-radius: 0;
  border: 1px solid #000;
  resize: none;
}
textarea {
  position: absolute;
  top: 0;
  color: transparent;
  background: transparent;
}
.red { color: #f00 }
.green { color: #0f0 }
#caret {
  display: inline-block;
  position: absolute;
  width: 1px;
  background: #000;
}
#caret[hidden] { display: none }
<div id="mydiv"><span id="caret">&nbsp;</span></div>
<textarea id="myta" autofocus=""></textarea>

Why not simply use a <div contenteditable="true"></div> instead <textarea></textarea> ?. With this you don't need the extra textarea . See a demo here .

HTML:

<div id="myta" autofocus="" contenteditable="true"></div>

JavaScript:

var myta = document.getElementById('myta');
function updateDiv() {
    var fc;
    var text = myta.innerText || myta.textContent;
    while (fc = myta.firstChild) myta.removeChild(fc);
    for (var i = 0; i < text.length; i++) {
        var span = document.createElement('span');
        span.className = Math.random() < 0.5 ? 'green' : 'red';
        span.appendChild(document.createTextNode(text[i]));
        myta.appendChild(span);
    }
    placeCaretAtEnd(myta);
};
myta.addEventListener('input', updateDiv);

Also, to move the caret at the end when you put the new text inside the div I used that function from this answer:

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://www.djcxy.com/p/86018.html

上一篇: 如何使用gcc和行号信息获取C ++的堆栈跟踪?

下一篇: 在自定义textarea中显示插入符号而不显示其文本