javascript - How to limit character input in contenteditable used within a html table - Stack Overflow

admin管理员组

文章数量:1324637

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

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

• javascript
• jquery
• html
• contenteditable

Share Improve this question Follow edited May 23, 2017 at 10:28 CommunityBot 111 silver badge asked Sep 8, 2015 at 14:21 1D9C1D9C 8522 silver badges77 bronze badges 3

• 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 Commented Sep 8, 2015 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 Commented Sep 8, 2015 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 Commented Sep 8, 2015 at 14:27

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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./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>

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.

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/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();
}

本文标签： javascriptHow to limit character input in contenteditable used within a html tableStack Overflow