1

I am looking to find a way using jquery / html / or even css to do the following.

My text area is fixed size, 1 font size/type, and I want to be able to do the following.

  • Limit number of lines to 18 lines
  • Display the number of lines the user has used so far (Kind of like twitter approach with characters but displaying lines used)

Line Definition: A line for my project is either when the user presses enter on the keyboard and goes to a new line, OR when a new row / line is created in the textarea by naturally typing continuously int he textarea. I basically have a fixed size textarea and the user cannot go outside these limits I set.

Redwall
  • 1,010
  • 5
  • 30
  • 55

2 Answers2

1

I will not provide any code snippets for your problem but just an approach of how i'm seeing the solution. Basing your algorithm on the font.js javascript library, you could retrieve the length in pixels of the text and of all the caracters in the text. If you're using a unique font in your textbox you could know when a line is completed each time the number of pixels in a line equals or is inferior to the actual number of pixels used in a new line. In pseudo-code it would look like this :

var textBoxLineInPixels = 300 //or getting the actual number through DOM;

onChangeEvent    {
   var totalNumberOfPixels = getNumberOfPixelsFromElement(idToYourTextBox);
   var numberOfLinesUsed = totalNumberOfPixels / textBoxLineInPixels;
   update(idToYourNumberOfLinesContainer, numberOfLinesUsed);
}

Dividing the total number of pixels in your textarea by the the number of pixels in a line will give you the current number of lines used in your textarea.

Halim Qarroum
  • 13,985
  • 4
  • 46
  • 71
  • Thanks, but I am sure there is a simpler JavaScript version to make this happen. I have tried the solution [here](http://stackoverflow.com/questions/6501043/specify-and-limit-number-of-lines-in-textarea-and-display-line-count-using-jquer/6501310#6501310), but it just does not seem to work at all. – Redwall Jan 29 '12 at 11:48
  • The solution provided in your link will not be efficient for several cases such as copy/paste in the box for example. There might be other solutions indeed although the one i gave you seems easy enough. Good luck ! – Halim Qarroum Jan 29 '12 at 11:58
  • Thanks, I would just not be knowledgeable enough at JavaScript to know how to do your suggestion :( .... I understand what you are saying, and yep I guess that could work... – Redwall Jan 29 '12 at 12:11
  • Ok no problem. But I didn't manage to find a standard and simple to use solution for your problem, I think at this point you must find one by yourself since conceptors of Javascript did not implement one :) – Halim Qarroum Jan 29 '12 at 12:20
  • Thanks for the help out much appreciated. I will give this a go now and see what I can figure out – Redwall Jan 29 '12 at 12:26
  • Hi HQarroum, I gave what you wrote a go here http://jsfiddle.net/Fcgby/1/ but it is not working right. Any tips? I also tried a version that works for lines/characters, but of course it does not work without pressing the 'Enter' key which I need...http://jsfiddle.net/vX7Dt/11/ – Redwall Feb 01 '12 at 08:26
  • Yes that's normal, thé example I gave you is pseudo-code, it means it's just an algorithme not actual Javascript code. You have to include thé font.js library, and write actual Javascript code following thé algorithm Up there. – Halim Qarroum Feb 01 '12 at 08:34
  • hi, yes I did include the font.js lib on the jsfiddle page in the sidebar include section. to be honest, I don't have a clue how to do this beyond my effort so far (and that was mainly your help) If you are feeling like you could spare 5mins, would be great if you could take a look at that code...if not, no worries..I will keep trying to find a solution...thanks – Redwall Feb 01 '12 at 11:01
  • Ok but i don't think it's gonna take 5 mins so let me sometime, i can't today but i will answer you by tomorrow :) – Halim Qarroum Feb 02 '12 at 05:34
0

Not exactly an answer to the question but this will limit the number / count down the characters in a text area as you type.

Also removing any unwanted characters.

CSS:

<style>
div.textarea-wrap{
    padding: 8px 0px;
    border-radius: 3px;
    postion:relative;
    margin: 5px 0px 15px 0px;
}


textarea#styled_text_area {
    width: 93.5%;
    height: 120px;
    font-size: 12px;
    border: 1px solid slategrey;
    border-radius: 3px;
    padding: 8px 3%;
    font-family: Tahoma, sans-serif;
    background: #E3E9ED;
}


.remaining {
    margin: 3px 0px;
    line-height: 10px;
}

div.remaining p{
    color: lightslategrey;
    float: right;
    margin: 4px 3% 0px 0px;
    float:right;
}

.remaining input{
    width:27px;
    border: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: lightslategrey;
    float:right;
    margin: 0;
}
</style>

Javascript:

<script> 
function clean(el){
    var textfield = document.getElementById(el);
    var regex = /[^a-z 0-9?!.,]/gi;
    if(textfield.value.search(regex) > -1) {
        textfield.value = textfield.value.replace(regex, "");
        }
}
// Text counter 
var maxAmount = <?php echo($message_input_size);?>;
function textCounter(textField, showCountField) {
    if (textField.value.length > maxAmount) {
        textField.value = textField.value.substring(0, maxAmount);
    } else { 
        showCountField.value = maxAmount - textField.value.length;
    }
}   
</script>

HTML:

<div class="textarea-wrap">

    <textarea name="ta" id="styled_text_area" rows="6" placeholder="Type here..." onKeyDown="textCounter(this.form.ta,this.form.countDisplay), clean('styled_text_area');" onKeyUp="textCounter(this.form.ta,this.form.countDisplay), clean('styled_text_area');"></textarea>   


    <div class="remaining">
    <p>Characters Remaining</p>
    <input readonly type="text" name="countDisplay" size="3" maxlength="3" value="500"><br><br> 
    </div>
</div>
Nial Bell
  • 1