Textara selection (v2)

Revision 2 of this benchmark created by Marcin on

Preparation HTML

<script>
  var veryLongText = '';
  for (var a = 0; a < 10000; a++) {
    veryLongText += 'word ';
  }

  var BUTTON = document.createElement('BUTTON');
  document.body.appendChild(BUTTON);

  var TEXTAREA = document.createElement('TEXTAREA');
  document.body.appendChild(TEXTAREA);

  var DIV = document.createElement('DIV');
  DIV.contentEditable = true;
  DIV.innerHTML = veryLongText;
  var style = DIV.style;
  style.position = 'fixed';
  style.top = 0;
  style.left = 0;
  style.width = '100px';
  style.height = '100px';
  document.body.appendChild(DIV);

  if (typeof style.opacity !== 'undefined') {
    style.opacity = 0;
  } else {
/*@cc_on @if (@_jscript)
     if(typeof style.filter === 'string') {
     style.filter = 'alpha(opacity=0)';
     }
     @end @*/
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
value + select()
TEXTAREA.value = veryLongText;
TEXTAREA.select();
BUTTON.focus();
ready
innerHTML + select()
TEXTAREA.innerHTML = veryLongText;
TEXTAREA.select();
BUTTON.focus();
ready
selectionStart
TEXTAREA.value = veryLongText;
TEXTAREA.focus();
TEXTAREA.selectionStart = 0;
TEXTAREA.selectionEnd = veryLongText.length;
BUTTON.focus();
ready
createRange
if (document.createRange) {
  DIV.innerHTML = veryLongText;
  var userSelection = window.getSelection();
  var theRange = document.createRange();
  theRange.setStart(DIV, 0);
  theRange.setEnd(DIV, 1);
  userSelection.addRange(theRange);
  BUTTON.focus();
}
else {
 for(var i=0; i<10000000; i++){}
}
ready
createRange/selectNodeContents
if (document.createRange) {
  DIV.innerHTML = veryLongText;
  var userSelection = window.getSelection();
  var theRange = document.createRange();
  theRange.selectNodeContents(DIV);
  userSelection.addRange(theRange);
  BUTTON.focus();
}
else {
 for(var i=0; i<10000000; i++){}
}
ready
IE (moveToElementText)
DIV.innerHTML = veryLongText;
var range = document.body.createTextRange();
range.moveToElementText(DIV);
range.select();
BUTTON.focus();
ready
IE (moveStart/moveEnd)
TEXTAREA.value = veryLongText;
var range = TEXTAREA.createTextRange();
range.collapse(true);
range.moveStart('character', 0);
range.moveEnd('character', veryLongText.length);
range.select();
BUTTON.focus();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Marcin on
  • Revision 2: published by Marcin on