Geek Answers Handbook

How to limit character input to contenteditable used in html table

I am currently using an html table on my webpage so that the user can enter certain data. However, since there are no restrictions on entering characters, the table can be stretched to a large extent when the user enters as many characters as he wants.

I was wondering how to limit this contenteditable so that this does not happen?

Below is a snippet of code that I use for a table

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

I found this link below for a similar problem, but as an innovator for jQuery and an amateur developer, I struggle to understand the answers and how to use them.

Character limit in ContentEditable

+5
source share
3 answers

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

UPDATE: Add a listener to the paste event. Then check the length of the content. Also disable drag and drop to prevent dragging and dropping content.

 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>
+3
source

Add an overflow policy, for example:

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

If you know how to use CSS classes, use this.

0
source

I used the jQuery binding function, which calls the "editableContentChanged" function whenever a div has one of the following events: "blur keyup paste copy cut mouseup". You can look at the documentation and add events to the binding function if you need to. The editableContentChanged function first replaces the contents of the div being edited, and then calls the setCaret method, which places 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(); }
0
source

More articles:


All Articles