Editable numbered lists in HTML

  • Article

One of the requirements of the submission application is to accept a list of steps that the user must do to either compile or run the tool or sample. Now, the old website supported this by presenting a series of single-line text boxes, with a button to add additional textboxes; this prevented the users from entering the data in a freeform fashion, and would allow future programmatic manipulation (autogenerated readme files).. My manager and I thought we might be able to improve on the UI...

The first thing that came to mind is all of the rich text editors that I've used (and indeed, am using now to compose this post). They always have a button for inserting a numbered list, and I thought I could leverage that functionality.

A quick search turned up this public domain tool: https://www.kevinroth.com/rte/demo.htm; On that website he mentions that this feature requires "designMode()." Moving on to the link he provides on MSDN, I found everything I needed to design an editable numbered list control. I also found the How to Create an HTML Editor Application article very helpful.

So, I first used the execCommand to execute an InsertOrderedList command, so that I could see what HTML was generated within my Div. I then pre-populated the Div with the standard <OL><LI> tags that were generated.

Finally, I had to prevent the users from exiting the numbered list. Towards that end, I added scripting that prevents the user from copy/pasting, drag/dropping, hitting enter on a blank line, or hitting backspace at the beginning of the line. This last requirement resulted in the fun atBeginning function, which retrieves the current caret's position, moves back a character, and determines if the caret is in a new element.

So, here you go! An editable control that forces the user to edit within numbered lists:

<

html>
<head>
<title>Numbered List Editor</title>
<script language="javascript" type="text/javascript">
function atBeginning()
{
      //Get the current caret's position.
theCaret = document.selection.createRange().duplicate();

      //Get the element that the caret is in.
var currentLI = theCaret.parentElement().uniqueID;

      //Go back one character.
theCaret.move("character",-1);

      //Return true if we are now in a new element (and hence _were_ at the beginning).
return (theCaret.parentElement().uniqueID != currentLI);
}
</script>
</head>
<body>

<!--
Div is editable.
   On KeyDown we check for backspace, and only allow a deletion
      if we are not at the very beginning of an element.
This prevents deletion of the row, and exiting the numbered list.
On KeyPress we prevent hitting Enter on a blank line (or if there are any blank lines)
This prevents the user from exiting the numbered list.
And we simply prevent people from pasting or drag/dropping.
-->
<div
id="EditRegion"
CONTENTEDITABLE
style="background-color:white; border-color:#779DB4; width:357px; border:solid 1px;height:100px;overflow:scroll;"
onkeydown="if (window.event.keyCode==8 && atBeginning()) return false;"
onkeypress="return !(window.event.keyCode==13 && EditRegion.innerHTML.toUpperCase().indexOf('<LI></LI>')>-1);"
ondrop="return false;"
onpaste="return false;"
> <OL><LI></LI></OL>
</div>
</body>
</html>