Word wrap in multiline textbox after 35 characters

textarea character limit javascript
how to limit the number of lines and characters in a textarea
textarea limit characters per line
textarea minlength
textarea word limit
textbox character counter jquery
textarea character limit jquery
textarea word limit javascript validation
<asp:TextBox CssClass="txt" ID="TextBox1" runat="server"
             onkeyup="CountChars(this);" Rows="20" Columns="35" 
             TextMode="MultiLine" Wrap="true">
</asp:TextBox>

I need to implement word-wrapping in a multi-line textbox. I cannot allow users to write more then 35 chars a line. I am using the following code, which breaks at precisely the specified character on every line, cutting words in half. Can we fix this so that if there's not enough space left for a word on the current line, we move the whole word to the next line?

function CountChars(ID) {
    var IntermediateText = '';
    var FinalText = '';
    var SubText = '';
    var text = document.getElementById(ID.id).value;
    var lines = text.split("\n");
    for (var i = 0; i < lines.length; i++) {
        IntermediateText = lines[i];
        if (IntermediateText.length <= 50) {
            if (lines.length - 1 == i)
                FinalText += IntermediateText;
            else
                FinalText += IntermediateText + "\n";
        }
        else {
            while (IntermediateText.length > 50) {
                SubText = IntermediateText.substring(0, 50);
                FinalText += SubText + "\n";
                IntermediateText = IntermediateText.replace(SubText, '');
            }
            if (IntermediateText != '') {
                if (lines.length - 1 == i)
                    FinalText += IntermediateText;
                else
                    FinalText += IntermediateText + "\n";
            }
        }
    }
    document.getElementById(ID.id).value = FinalText;
    $('#' + ID.id).scrollTop($('#' + ID.id)[0].scrollHeight);
}
Edit - 1

I have to show total max 35 characters in line without specific word break and need to keep margin of two characters from the right. Again, the restriction should be for 35 characters but need space for total 37 (Just for the Visibility issue.)

http://jsfiddle.net/g4Kez/4/

This code should wrap the text at 35 characters like you need. This is kind of a weird way to restrict input but it should work. (Previous versions had bugs in them.. I think this one finally works for the most part)

I need a multiline textbox that preserves word wrap on post back , Must have word wrap (like a multiline textbox or textarea). When posted back, I need access to each line of text as it looked on the clients in 4 different database fields that each have a maximum length of 35 characters. The function textbox_grob() is intended to render multi-line text labels that require automatic word wrapping. It is similar to richtext_grob(), but there are a few important differences. First, while richtext_grob() is vectorized, textbox_grob() is not. It can draw only a single text box at a time. Second, textbox_grob() doesn't support rendering the text box at arbitrary angles. Only four

I use the following Jquery plugin in an asp.net web app. Put this code under the opening script tag:

jQuery.fn.limitMaxlength = function(options){

var settings = jQuery.extend({
attribute: "maxlength",
onLimit: function(){},
onEdit: function(){}
}, options);

// Event handler to limit the textarea
var onEdit = function(){
var textarea = jQuery(this);
var maxlength = parseInt(textarea.attr(settings.attribute));

if(textarea.val().length > maxlength){
  textarea.val(textarea.val().substr(0, maxlength));

  // Call the onlimit handler within the scope of the textarea
  jQuery.proxy(settings.onLimit, this)();
}

// Call the onEdit handler within the scope of the textarea
jQuery.proxy(settings.onEdit, this)(maxlength - textarea.val().length);
}
this.each(onEdit);
return this.keyup(onEdit)
    .keydown(onEdit)
    .focus(onEdit);
}

And then in document ready add:

$(document).ready(function () {

//give the user feedback while typing
var onEditCallback = function(remaining){
$(this).siblings('.charsRemaining').text("Characters remaining: " + remaining);

if(remaining > 0){
    $(this).css('background-color', 'white');
    }
}

var onLimitCallback = function(){
    $(this).css('background-color', 'red');
}

$('textarea[maxlength]').limitMaxlength({
    onEdit: onEditCallback,
    onLimit: onLimitCallback
});

});//end doc ready

And then on each textarea just ensure that maxlength='35' like so and add a feedback placeholder...

<textarea id="TextBox1" class="txt" runat="server" placeholder="Some Text"  maxlength="35" cols="35" rows="2" ></textarea>

Hope this helps!

How to restrict multi line text with 50 characters each line, Hi, I need to create a multi line text with max 1000 characters and each line should be 50 chars. Any idea? Must have word wrap (like a multiline textbox or textarea). Word wrap should support pasted text as well as entered text. 2. Must be able to specify maximum line length (35 characters) and maximum number of lines (4).

This is a testing exercise. This will break the line at 35 characters. Make sure to set cols="35"

I hope this helps.

UPDATE: 6/26/2012

Removed my JSFiddle link. I will not solve the problem unless you start to answer questions being asked by myself and others.

Straight to the Point : Dreamweaver 8, When you select the Multi line radio button, the Max Chars box turns into the Num in a Multiline text field to wrap onto a new line when the user reaches the end of a line. l l l email: l e __ i <bodv> <form> <p>l<$bif§l ' _ V.35*” i VProperties . I have a TextBox in my form and I am trying to wrap the content into multiple lines so that it doesn't get chopped off. So far I did this, TextBox myTextBox = new TextBox(); myTextBox.Multiline = true; myTextBox.WordWrap = true; I tried various combinations of above, by setting Multiline to false and then WordWrap to false. But nothing seems to

How to limit the number of characters entered in a TEXTAREA in an , In an HTML form, a textarea element specifies a text input area. Instead of allowing users to scroll horizontally, they "soft wrap": when line length would Basically, a textarea is for unlimited, usually multi-line input of text, whereas input​  Mr. Blom, thank you for the reply. I think there must be a way to tell Word 2010 and later to start a new line after a specific word in the "title" property - special character (or combination of characters). My final goal is to have a text in the document that looks exactly as I want.

Thanks for all of the examples. I worked on this, because ultimately I need to wordwrap text in an SVG xml (which my current spec. doesn't support word-wrapping).

Here is my edit too. https://jsfiddle.net/vr_driver/7kr1vfq5/50/

function columncorrector() {
  var text = document.getElementById("TextBox1").value;
  var maxcolumnwidth = 40;
  var lengthSinceNewLine = function(input) {
    var lastNewLine = input.lastIndexOf("\n");
    if (lastNewLine == -1) {
      return input.length;
    } else {
      console.log("lnl: " + lastNewLine);
      console.log("input.length: " + input.length);
      return input.length - lastNewLine;
    }
  };

  console.log(lengthSinceNewLine(text));
  lines = text.split("\n").length;
  console.log("lines: " + lines);

  if (lines == 1) // without this, the first line always comes out one character longer
  {
    maxcolumnwidth_fix = maxcolumnwidth - 2;
  } else {
    maxcolumnwidth_fix = maxcolumnwidth - 1;
  }

  if (lengthSinceNewLine(text) >= maxcolumnwidth_fix) {
    if (text[text.length - 1] == " ") {
      text = text + "\n";
    } else {
      console.log("length:" + text.length);
      console.log(text.lastIndexOf(" "));
      if (text.lastIndexOf(" ") == "-1") {
        console.log("here 1");
        text = text + "-\n"; // a forced hyphen            
        document.getElementById("TextBox1").value = text;
      } else {
        var space = text.lastIndexOf(" ");
        text = text.substring(0, space) + "\n" + text.substring(space + 1, text.length);
        document.getElementById("TextBox1").value = text;
      }

    }
  }
};
.txt {
  width: 400px;
}
<textarea id="TextBox1" class="txt" rows="30" onkeydown="columncorrector()" onkeyup="columncorrector()"></textarea>

wordwrap - Manual, wordwrap — Wraps a string to a given number of characters When FALSE the function does not split the word even if the width is smaller than If you're looking to wordwrap a multi-line string with something besides a newline character, $chargroup[4] = array(35,36,43,48,49,50,51,52,53,54,55,56,57,60,​61,62,63, 69,70  For example the TextBox has 126 characters. 126 \ 40 = 3 ' Integer division. 3 * 40 = 120 'As we have 6 characters left over we add one to the lineCount giving us 4 lines.:-) ' However this is approximate as not all fonts / typefaces use the same width for every character. E.G. The letter '"I" is thinner than the letter "M". ' I hope this helps.

Multiline Textbox text wraping, Hi M.Ravibalaji, You can apply "text-wrap" or "word-wrap" styles to your textbox or put a div tag with "text-wrap" or "word-wrap" styles and put  4) The second text box "CopyOfDesc" is hidden and is enabled after user submission. Rule used here is "hiddenButton is equal to No - hide this control". And the default value in this control box is ".Description". 5) This way, the text in the multi-line text box "Description" gets wrapped in "CopyOfDesc' after all submissions.

TextBox.Lines.Count with Wordwrap - MSDN, Multiline = True . With that said, when I type in the input textbox and the wordwrap moves the text to the next line, the line count Does anyone have any ideas outside of inspecting each character and programmatically rewriting the . Edited by John Anthony Oliver Thursday, October 25, 2012 2:35 PM. That way you can have or example a textarea with 14 rows and 10 cols with word wrap and max character length of "40" characters that works exactly like a input text box does but with rows instead and without using input text.

Auto height input text, Rows is the vertical length that a multi-line text input goes down and cols is the TextBox Height Resize; Report textbox height after CanGrow has been activated Jan 09 For, the multi-line text box above, rows="10" and cols="35". to which pango will automatically word wrap (or character wrap, for chinese) the input text. I want to limit how much they can put into this block. I have already tried to limit the number of characters but this does not have the desired outcome. What I really need to do is limit the number of lines that they put into the multiline textbox. Is there any way to do this? Maybe with a validation rule?

Comments
  • If having more than 35 characters on a line would break something, it's not such a good idea to do javascript validation. You may encounter issues where someone has javascript disabled, or knows how to break the check if they're being malicious. Is it a possibility to do this server side? Perhaps a little information on why you need this and we could help with a possible alternate solution?
  • Is that a strict limit? 35 characters, absolutely nothing more than that?
  • If not, we can write <textarea id="myText" cols="35" rows="20" style="resize:vertical;"></textarea>, which sets the width to roughly 35 chars, and prevents users from resizing the textarea. Word wrap works automatically.
  • ASP:TextBox have a property MaxLength hav e you tried it msdn.microsoft.com/en-us/library/…
  • For those asking "Why?": There are systems that have very specific max characters per line, max words or words per line, and max lines of text restrictions. Typically these types of restrictions are for systems where the data being collected/submitted must correspond exactly to the dimensions of a paper form, or some other kind of physical printing. Some of these systems are poorly designed, others are legacy systems/interfaces. I can't speak for @Kanavi's requirements, but I've run across this before and it wasn't negotiable.
  • Try with this sentence "This is a testing purpose exerc so pleas ignore this sentence" Now when the line after "ignore" word will be created, press back button by keeping the cursor at the biginning of "ignore", it will append it with previous line. This is not required.
  • Ah, I see. I could write this, but is there a specific reason why you aren't using @Jimmy X 's answer from the comment? The resize:vertical style seems to do what you need.
  • No I can't do that. The comment does not addresses my query
  • Try with this sentence "This is a testing exercise please ignore". and mention cols ="35". This wil break the word.
  • I tried "This is a testing exercise please ignore" and it is breaking the word ignore. I mean, "i" remains in first line and rest shifts to second line.
  • This is possible, but before I try take a good chunk of time to solve this I have a couple questions. Is there any way this requirement can be lifted? It is a rather ridiculous request considering 35 characters could have a variable length. For example, pixel-width of this string "mammoth" is much greater than "illness". So I guess the real question here is "Why 35 characters, not a set pixel-width of each line?"
  • In Bret Holt JSFiddle, In case i increase the columns to 40, this is allow user to increase the limit to 40 and this should not be the case. Once the columns are 40 it should still keep according to 35 words. So your answer is not addressing to my query.