How to limit character input in contenteditable used within a html table

Question

I am currently using a html table within my web page to allow the user to input certain details. However as there is no limit on the character input the table can be stretched largely when the user types in as many characters as they wish.

I was wondering how to limit this contenteditable to prevent this from happening?

Below is a snippet of the code I am using for the table

<tr>
<td>One Off Capital</td>
<td><div contenteditable>  </div></td>
<td><div contenteditable>  </div></td>
</tr>

I have found this link below to a similar problem, however being new to jQuery and an amateur developer, I am struggling to understand the answers given and how I can use them.

Limiting Number of Characters in a ContentEditable div

Why do you want to limit the input? Do you have limited storage or is it purely visual? It is ok if the input wraps to the next line? Have you considering using `input` or `textara`? — Halcyon, Sep 08 '15 at 14:24
Just visible, within the page the table stretches too far, preventing the columns next to be seen when one cell has too many characters — 1D9C, Sep 08 '15 at 14:25
Yes it would be ok to move to the next line. I've used contenteditable as the user must input in the table, a text area wouldnt be suited — 1D9C, Sep 08 '15 at 14:27

Pranav C Balan · Accepted Answer · 2015-09-08T15:10:55.550

5

You can do something tricky with keypress() event handler. Prevent keypress event if content is greater than your limit by returning false

UPDATE : Add listener to paste event. Then check the content length. Also prevent drag option in order to prevent content dragging to it.

var limit = 10;
$('div[contenteditable]').keypress(function() {
  return this.innerHTML.length < limit;
}).on({
  'paste': function(e) {
    var len = this.innerHTML.length,
      cp = e.originalEvent.clipboardData.getData('text');
    if (len < limit)
      this.innerHTML += cp.substring(0, limit - len);
    return false;
  },
  'drop': function(e) {
    e.preventDefault();
    e.stopPropagation();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tr>
  <td>One Off Capital</td>
  <td>
    <div contenteditable></div>
  </td>
  <td>
    <div contenteditable></div>
  </td>
</tr>

edited Sep 08 '15 at 15:10

answered Sep 08 '15 at 14:26

Pranav C Balan

113,687
23
165
188

1

This is not a full solution. I can still use `ctrl+v` (or right click + paste) to add more than 10 characters. – Halcyon Sep 08 '15 at 14:29
I can also add more characters if I drag/drop text from another document. – Halcyon Sep 08 '15 at 14:43
@Halcyon : ok i will check :) – Pranav C Balan Sep 08 '15 at 14:47
how to get this function work correctly on dynamically created elements? – Sanjit Bhardwaj Nov 01 '18 at 14:40
@sanjitbhardwaj : you need to bind handler when its generating or u need to use event delegation to listen evwnts on dynamically generated elements. – Pranav C Balan Nov 02 '18 at 04:15

score 0 · Answer 2 · answered Sep 08 '15 at 14:28

0

Add a an overflow policy, something like:

<div style="width: 300px; overflow: auto;" contenteditable="contenteditable"></div>

If you know how to use CSS classes use that.

answered Sep 08 '15 at 14:28

Halcyon

57,230
10
89
128

score 0 · Answer 3 · answered Sep 08 '15 at 16:34

I used the jQuery bind function which calls a function 'editableContentChanged' whenever a div has any of the following events occur 'blur keyup paste copy cut mouseup'. You can look at the documentation and add events to the bind function if you need. The editableContentChanged function first replaces the contents of the editable div and then calls setCaret method which puts the cursor at the end of the content. Heres a working example https://jsfiddle.net/vacfkono/4/
HTML

<tr>
<td>One Off Capital</td>
<td><div contenteditable>fadsfasd </div></td>
<td><div contenteditable> fasdfasd </div></td>
</tr>

Javascript/jQuery

  $(document).ready(function () {
        $('div').bind('blur keyup paste copy cut mouseup', editableContentChanged);
    });

var maxLength = 20;
function editableContentChanged() {
    if($(this).html().length >= maxLength) {
        $(this).html($(this).html().substring(0, maxLength-1));
        setCaret(this);
    }
}

function setCaret(el) {
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(el.childNodes[0], 19);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    el.focus();
}

How to limit character input in contenteditable used within a html table

3 Answers3