Forums

I am trying to achieve a field which behaves like Twitter.

ie.:
[list]2 lines[/list]
[list]displays how many characters left out of 140 [/list]
[list](additional luxury would be the negative numbers you get in Twitter when you type over the 140)[/list]

So far:
Imperfect solution 1: Textarea:
a textarea with 70 width and 2 lines high. Trouble with that is that you can keep typing forever.... Is there a way to limit the no of characters inputted in a textarea?

Imperfect solution 2: Text
Text Input: Settings in the wizard are size and max size. If I set size to 70 and max size to 140 then that works in that it limits input to 140 characters and fits on the screen but has the effect that the user will not be able to see their whole 'tweet' at once.

But if I set size to 140, then unfortunately the text box extends off through the modules on the right side of my template and off the page. Is there a way to force a text input box like this to wrap? Or a way to instruct it to display over 2 or more lines?

The display stuff is important.
The character count thing would be finesse...

Thanks for any of your wisdom.

Paul

Hi Paul,

You need to find a JavaScript script that will count the number of characters in a text area. There are several around.

Google "Mootools Textarea Counter" (unfortunately Joomla still uses Mootools 1.1 and some of the better ones require 1.2)

Bob

Javascript? Holy cow - sounds too complex for me! Unless there's a super easy link explainign what a moo tool is and what you do with it???????

Maybe I'll settle for clues on displaying the box how I'd like it.

Is there no way to limit input on a field of type "textarea"?

Hi Paul,

No, there's no way of limiting the input from a textarea without either hacking off the end or using JavaScript to disable the field at some point. The JavaScripts aren't too hard to use and usually come with some limited documentation about how to apply them.

Bob

Thanks Greyhead - I will try javascript sometime. For the current situation I just went ahead and simply asked users to keep it short. So far that's worked but obviously the JS would be handy to learn. Right now its gobbledigook.

Thanks for replying 8)

ok - am aware that this post isa month old, however I had to find this solution for somthing myself, so heres a solution in case anyone else needs it!

Would needs to be wrapped and called with dom ready, adapted to the number of chars you want etc, cobbled together from 2 sources, so you may well be able to improve on it! This is just proof of concept.

demo: http://dev.carsavingexpert.com/index.php?option=com_chronocontact&chronoformname=howmany

Javascript, then html.

function getObject(obj) {
  var theObj;
  if(document.all) {
    if(typeof obj=="string") {
      return document.all(obj);
    } else {
      return obj.style;
    }
  }
  if(document.getElementById) {
    if(typeof obj=="string") {
      return document.getElementById(obj);
    } else {
      return obj.style;
    }
  }
  return null;
}

function CountME(enter,exit,text,characters) {
  var enterObj=getObject(enter);
  var exitObj=getObject(exit);
  var lpos=characters - enterObj.value.length;
  if(lpos <= 0) {
    lpos=0;
    text='<span class="disable"> '+text+' </span>';
    enterObj.value=enterObj.value.substr(0,characters);
  }
  exitObj.innerHTML = text.replace("{CHAR}",lpos);
}

<table align="center" class="" border="0" cellspacing="1" cellpadding="5">
<tr>
<td align="right" class=""><span class="options">Field Name</span></td>
<td class="2"><input type="text" class="text" id="front" name="targetField" maxlength="140" size="60" onKeyUp="CountME('front','back','{CHAR} characters left.',100);"><br><span id="back" class="minitext">100 characters left.</span></td>
</tr>
</table>