By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,901 Members | 1,496 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > javascript / ajax / dhtml > questions > srcelement and innertext and?
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,901 IT Pros & Developers. It's quick & easy.

srcElement and innerText and?

P: n/a
To show users how many characters they have left in a TEXTAREA input I
have been using "taCount" from a website I googled.

function taCount(visCnt) {
var taObj=event.srcElement;
if (taObj.value.length>taObj.maxLength*1)
taObj.value=taObj.value.substring(0,taObj.maxLengt h*1);
if (visCnt) visCnt.innerText=taObj.value.length;
}

After googling I found out that firefox does not allow
"event.srcElement" and "innerText" to work so I tried substituting
with

var taObj = (event.target) ? event.target : event.srcElement
innerText to innerHTML

But it is still not working.

Entire code..

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

function taLimit(taObj) {
var taObj = (event.target) ? event.target : event.srcElement
if (taObj.value.length==taObj.maxLength*1) return false;
}

function taCount(taObj, visCnt) {
var taObj = (event.target) ? event.target : event.srcElement
if (taObj.value.length>taObj.maxLength*1)
taObj.value=taObj.value.substring(0,taObj.maxLengt h*1);
if (visCnt) visCnt.innerHTML=taObj.maxLength-taObj.value.length;
}

</script>

You have <B>
<div id="txtmsg" class="scfmfrm_dept">&nbsp;</div>

<span id="myCounter">255</SPAN></Bcharacters remaining
for your description..

<TEXTAREA onkeypress="taLimit(this)" onkeyup="return taCount(this,
myCounter)"
name=Description rows=7 wrap=physical cols=40 maxLength="255"></
TEXTAREA>

Anyone know what other problems firefox is having with this?

Garry Jones
Sweden
Sep 6 '08 #1
Share this Question
Share on Google+
5 Replies
P: n/a
GarryJones wrote:
<TEXTAREA onkeypress="taLimit(this)" onkeyup="return taCount(this,
myCounter)"
name=Description rows=7 wrap=physical cols=40 maxLength="255"></
TEXTAREA>

Anyone know what other problems firefox is having with this?
There is no maxlength attribute defined for 'textarea' elements. see
http://www.w3.org/TR/html4/interact/forms.html#h-17.7
Consequently the DOM does not define a maxLength property, see
http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-24874179
That way your code
taObj.maxLength
gives undefined with Firefox.
Try
taObj.getAttribute("maxlength")
instead or (for IE I fear)
taObj.getAttribute("maxLength")

--

Martin Honnen
http://JavaScript.FAQTs.com/
Sep 6 '08 #2
P: n/a
On Sep 6, 11:30*am, GarryJones <mor...@algonet.sewrote:
To show users how many characters they have left in a TEXTAREA input I
have been using "taCount" from a website I googled.

function taCount(visCnt) {
var taObj=event.srcElement;
if (taObj.value.length>taObj.maxLength*1)
taObj.value=taObj.value.substring(0,taObj.maxLengt h*1);
if (visCnt) visCnt.innerText=taObj.value.length;

}

After googling I found out that firefox does not allow
"event.srcElement" and "innerText" to work so I tried substituting
with

var taObj = (event.target) ? event.target : event.srcElement
innerText to innerHTML

But it is still not working.

Entire code..

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

function taLimit(taObj) {
var taObj = (event.target) ? event.target : event.srcElement
*if (taObj.value.length==taObj.maxLength*1) return false;

}

function taCount(taObj, visCnt) {
var taObj = (event.target) ? event.target : event.srcElement
*if (taObj.value.length>taObj.maxLength*1)
taObj.value=taObj.value.substring(0,taObj.maxLengt h*1);
*if (visCnt) visCnt.innerHTML=taObj.maxLength-taObj.value.length;

}

</script>

You have <B>
<div id="txtmsg" class="scfmfrm_dept">&nbsp;</div>

<span id="myCounter">255</SPAN></Bcharacters remaining
for your description..

<TEXTAREA onkeypress="taLimit(this)" onkeyup="return taCount(this,
myCounter)"
name=Description rows=7 wrap=physical cols=40 maxLength="255"></
TEXTAREA>

Anyone know what other problems firefox is having with this?

Garry Jones
Sweden
Give this a crack, it's only simple but it works in IE, FF and chrome.

<html>
<head>
<script>
function showLimit(src, limit, displayElem)
{
var srcElem = document.getElementById(src);
var displayElem =
document.getElementById(displayElem);
var strText= srcElem.value;
var intLen = strText.length;
var intRemaining = limit - intLen;

if (intRemaining <= 0)
{
var newVal = srcElem.value.substr(0, limit);
srcElem.value = newVal;
displayElem.innerHTML = 0;
return;
}
displayElem.innerHTML = intRemaining;
}
</script>
</head>
<body>
You have <b><span id="numLeft">10</span></bcharacters
remaining<br>
<textarea id="ta" onkeyup="showLimit('ta', 10, 'numLeft');"></
textarea>
</body>
</html>
Sep 6 '08 #3
P: n/a
Garry,

- In IE, event is a global object. In firefox, you have to get it
through the event handler. Firefox passes event object as the first
param to the event handler.
- maxLength attribute is valid for INPUT fields, but not valid for
TEXTAREA
- To access 'myCounter' span, get the reference using
document.getElementById

I have made the above mentioned changes, this is the modified code:
--------
<script language="JavaScript" type="text/javascript">

function taLimit(event, taObj, maxLength) {
var taObj = (event.target) ? event.target : event.srcElement
if (taObj.value.length==maxLength) return false;
}

function taCount(event, taObj, maxLength, visCnt) {
var taObj = (event.target) ? event.target : event.srcElement

if (taObj.value.length>taObj.maxLength)
taObj.value=taObj.value.substring(0,maxLength);

if (visCnt) visCnt.innerHTML=maxLength-taObj.value.length;
}

</script>

You have <B>
<div id="txtmsg" class="scfmfrm_dept">&nbsp;</div>

<span id="myCounter">255</SPAN></Bcharacters remaining
for your description..

<TEXTAREA onkeypress="taLimit(event, this, 255)"
onkeyup="return taCount(event, this, 255,
document.getElementById('myCounter'))"
name=Description rows=7 wrap=physical cols=40></TEXTAREA>
--------

Kiran Makam

Sep 6 '08 #4
P: n/a
SAM
GarryJones a écrit :
To show users how many characters they have left in a TEXTAREA input I
have been using "taCount" from a website I googled.
<script type="text/javascript">
function leftText(where, max) {
if(!where.repport) {
where.repport = document.createElement('P');
where.parentNode.insertBefore(where.repport, where);
}
where.repport.className = '';
var t = where.value;
var q = max - t.length;
where.repport.innerHTML = q>0? 'Characters remaining : '+q :
q==0? 'Filled up !' : 'Filling back';
if(q<0) {
where.value = t.substring(0,t.length-1);
where.repport.className = 'red';
}
}

</script>

<style type="text/css">
..red { color: red; font-weight: bold }
</style>

<form>
<textarea onkeyup="leftText(this, 25);">test</textarea>
<textarea onkeyup="leftText(this, 15);">test</textarea>
</form>

--
sm
Sep 6 '08 #5
P: n/a
On Sep 6, 1:58*pm, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:
GarryJones a écrit :
To show users how many characters they have left in a TEXTAREA input I
have been using "taCount" from a website I googled.

<script type="text/javascript">
function leftText(where, max) {
if(!where.repport) {
* *where.repport = document.createElement('P');
* *where.parentNode.insertBefore(where.repport, where);
* *}
where.repport.className = '';
var t = where.value;
var q = max - t.length;
where.repport.innerHTML = q>0? 'Characters remaining : '+q :
* * * * q==0? 'Filled up !' : 'Filling back';
if(q<0) {
* *where.value = t.substring(0,t.length-1);
* *where.repport.className = 'red';
* *}

}

</script>

<style type="text/css">
.red { color: red; font-weight: bold }
</style>

<form>
<textarea onkeyup="leftText(this, 25);">test</textarea>
<textarea onkeyup="leftText(this, 15);">test</textarea>
</form>

--
sm
Yeah, Sam's is better... use his :)
Sep 6 '08 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Question stats

  • viewed: 2893
  • replies: 5
  • date asked: Sep 6 '08
BYTES.COM © 2020 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | JavaScript / Ajax / DHTML Answers Sitemap | JavaScript / Ajax / DHTML Insights Sitemap

Follow us to get the Latest Bytes Updates