Results 1 to 2 of 2

Thread: Change textarea field to a div ?

  1. #1
    Join Date
    Nov 2016
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Change textarea field to a div ?

    Hello Everyone,
    I am tyring to change the textarea to a div
    Code:
    <div id="editor" contenteditable="true" name="content"></div>
    and is not working.
    Anyone, do you have any idea why is not working when i use div tag ?
    Any help is greatly appreciated
    Code:
    <div class="word-count">
      <textarea  id="editor" name="content" rows="30" cols="100"></textarea><br />
      Character Count: <span class="chars"></span> | 
      Word Count: <span class="words"></span> |
      Paragraph Count: <span class="paras"></span><br />
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    var wordCounter = {
    	el: '.word-count',
    	
    	initialize: function() {
    		var _this = this;	
    		$('div', this.el).on('keyup', function() { _this.update( $(this).text() ); });   
                    $('div', this.el).on('keyup',  function() { _this.update( $(this).text() ); }); 
    	},
    	
    	update: function(value) {
    		$('.chars', this.el).html( this.getCharCount(value) );
    		$('.words', this.el).html( this.getWordCount(value.trim()) );
    		$('.paras', this.el).html( this.getParaCount(value.trim()) );
    	},
    	
    	/* getCharCount:
    	 *   - Calculates the number of characters in the field.  - Counts *all* characters.
    	 */
    	
    	getCharCount: function(value) {
    		return value.length;
    	},
    	
    	/* getWordCount:
    	 *   - Calculates the number of words in the field.  - Words are separated by any number of spaces or a semi-colon.
    	 */
    	
    	getWordCount: function(value) {
    		if (value) {
    			var regex = /\s+|\s*;+\s*/g;
    			return value.split(regex).length;
    		}		
    		return 0;
    	},
    	
    	/* getParaCount:
    	 *   - Calculates the number of paragraphs in the field.   - Paragraphs are separated by any number of newline characters.
    	 */
    	
    	getParaCount: function(value) {
    		if (value) {
    			var regex = /\n+/g;
    			return value.split(regex).length;
    		}
    		
    		return 0;
    	}
    };
    wordCounter.initialize();
    </script>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well it does sort of work. The problems I see are that, since a contenteditable div is not a textarea, text is represented within it differently. When you hit enter in a textarea, (depending upon OS) a \n\r character pair or either a \n or a \r character is inserted. In a contenteditable div what happens is an element or elements are created in order to show the intended linebreak. In my browser that's div, in others it might be p or br, but adding an actual linebreak character would not produce one because it's a div and the text in a div doesn't break on a \n\r, \n, or \r. So, when you take the .text() of the div, all linebreaks represented by contained elements are lost, including the spaces between words that are created/represented by them. One would have to analyze the .html() or child elements and do so in different ways than the current functions for word count and paragraph count do in order to get an accurate measure of those things.

    BTW, you have:

    Code:
    		$('div', this.el).on('keyup', function() { _this.update( $(this).text() ); });   
                    $('div', this.el).on('keyup',  function() { _this.update( $(this).text() ); });
    These two lines are identical in meaning, only one of them is needed. But that doesn't change the outcome, just adds a little extra processing time.
    Last edited by jscheuer1; 11-29-2016 at 09:16 AM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Resolved Change colour of a specificlLi field
    By theremotedr in forum CSS
    Replies: 9
    Last Post: 05-22-2015, 05:39 PM
  2. Hidden Field Change
    By cs1h in forum JavaScript
    Replies: 2
    Last Post: 10-01-2009, 01:47 PM
  3. Replies: 6
    Last Post: 03-05-2009, 04:50 AM
  4. Change textarea to editable...
    By alexjewell in forum JavaScript
    Replies: 3
    Last Post: 07-02-2007, 04:36 PM
  5. How To: Change characters in a textarea?
    By locks in forum JavaScript
    Replies: 0
    Last Post: 02-16-2005, 04:08 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •