Text Length Parameter Inside HTML Panel

[Josh 37]

I'm trying to use a stat monitor inside a ui html panel so that as a user is typing in a field located within the ui it counts the text length.

 

for example: One of the fields is a META Data field that should only have 160 characters in it. As the user is typing I would like to display the number of characters next to the field they are typing in.

 

All of my attempts at this are failing. Is this possible?

 

here is my stat monitor for the ui

 

<div variable="#hpmeta stat" fillwith="innertext">0</div>

[LoWrIdErTJ - BotGuru 904]

you would have to do that with javascript to monitor in live view how many characters the person is typing in

 

enjoy the following..

 

ui html panel("<textarea name=\"getlength\" maxlength=\"160\" rows=\"5\" cols=\"45\">Demo Text. This field has a maxlength</textarea>

<script type=\"text/javascript\" language=\"javascript\">

/*

If you want to use this script, please keep the original author in this header!

 

Purpose: Script for applying maxlengths to textareas and monitoring their character lengths.

Author: James O\'Cull

Date: 08/14/08

 

To use, simply apply a maxlenth value to a textarea.

If you need it to prevent typing past a certain point, add lengthcut=\"true\"

 

Example:

<textarea maxlength=\"1000\" lengthcut=\"true\"></textarea>

 

If you add a new text area with javascript, simply call parseCharCounts() again find the new textarea(s) and label them!

*/

var LabelCounter = 0;

 

function parseCharCounts()

\{

//Get Everything...

var elements = document.getElementsByTagName(\'textarea\');

var element = null;

var maxlength = 160;

var newlabel = null;

for(var i=0; i < elements.length; i++)

\{

element = elements;

if(element.getAttribute(\'maxlength\') != null && element.getAttribute(\'limiterid\') == null)

\{

maxlength = element.getAttribute(\'maxlength\');

//Create new label

newlabel = document.createElement(\'label\');

newlabel.id = \'limitlbl_\' + LabelCounter;

newlabel.style.color = \'red\';

newlabel.style.display = \'block\'; //Make it block so it sits nicely.

newlabel.innerHTML = \"Updating...\";

//Attach limiter to our textarea

element.setAttribute(\'limiterid\', newlabel.id);

element.onkeyup = function()\{ displayCharCounts(this); \};

//Append element

element.parentNode.insertBefore(newlabel, element);

//Force the update now!

displayCharCounts(element);

\}

//Push up the number

LabelCounter++;

\}

\}

 

function displayCharCounts(element)

\{

var limitLabel = document.getElementById(element.getAttribute(\'limiterid\'));

var maxlength = element.getAttribute(\'maxlength\');

var enforceLength = false;

if(element.getAttribute(\'lengthcut\') != null && element.getAttribute(\'lengthcut\').toLowerCase() == \'true\')

\{

enforceLength = true;

\}

//Replace \\r\\n with \\n then replace \\n with \\r\\n

//Can\'t replace \\n with \\r\\n directly because \\r\\n will be come \\r\\r\\n

 

//We do this because different browsers and servers handle new lines differently.

//Internet Explorer and Opera say a new line is \\r\\n

//Firefox and Safari say a new line is just a \\n

//ASP.NET seems to convert any plain \\n characters to \\r\\n, which leads to counting issues

var value = element.value.replace(/\\u000d\\u000a/g,\'\\u000a\').replace(/\\u000a/g,\'\\u000d\\u000a\');

var currentLength = value.length;

var remaining = 0;

if(maxlength == null || limitLabel == null)

\{

return false;

\}

remaining = maxlength - currentLength;

if(remaining >= 0)

\{

limitLabel.style.color = \'green\';

limitLabel.innerHTML = remaining + \' character\';

if(remaining != 1)

limitLabel.innerHTML += \'s\';

limitLabel.innerHTML += \' remaining\';

\}

else

\{

if (enforceLength == true) \{

value = value.substring(0, maxlength);

element.value = value;

element.setSelectionRange(maxlength, maxlength);

limitLabel.style.color = \'green\';

limitLabel.innerHTML = \'0 characters remaining\';

\}

else \{

//Non-negative

remaining = Math.abs(remaining);

limitLabel.style.color = \'red\';

limitLabel.innerHTML = \'Over by \' + remaining + \' character\';

if (remaining != 1)

limitLabel.innerHTML += \'s\';

limitLabel.innerHTML += \'!\';

\}

\}

\}

 

//Go find our textareas with maxlengths and handle them when we load!

parseCharCounts();

</script>", 500)

 

this is from code view

[LoWrIdErTJ - BotGuru 904]

Video for the above code in use

http://screencast.com/t/4HLNl2KfY9Ge

[k1lv9h 76]

Hi,

 

Sample code:

ui html panel("<table>
<tr><td>
<textarea name=\"getlength1\" variable=\"#blocktext1\" maxlength=\"160\" rows=\"5\" cols=\"45\" oninput=ubot.runScript(\'updatecharcount()\') onmouseover=ubot.runScript(\'updatecharcount()\') onfocus=ubot.runScript(\'updatecharcount()\')>Demo Text. This field has a maxlength</textarea>
</td><td>
<div variable=\"#blocktextlength1\" fillwith=\"innertext\">0</div>
</td></tr>
</table>", 200)
define updatecharcount {
set(#blocktextlength1, $text length(#blocktext1), "Global")
}

 

sample-ui-html-char-count-002.ubot

 

Kevin

[Josh 37]

Thanks guys!