Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Textarea onFocus ..... only fring on text, not textarea

Status
Not open for further replies.
simonB2007

simonB2007

Programmer
Jun 12, 2007
16
0
0
GB
I'm creating a textarea on-the-fly, and setting the onfocus event to :
function selTxt(){window.event.srcElement.select();}

However, the event is only firing if the user sets the cursor on the text within the textarea, and not the whole text area itself.
i.e. if the textarea is 20 chrs wide, and populated with 'abc' ... you've got to click on 'abc' for the event to fire, the other 17chrs of the textarea box is non-firing !

In fact, moving the cursor over the textarea, i get a 'pointer' on the box in general, and it only changes to the text editing cursor when it meets text.

When the textarea is empty, therefore, you can't get to enter new text unless you squeeze the cursor right into the lefthand edge ... not very friendly or easy !


Any help appreciated !!!
There are some overflow-Y css settings i am wondering about, but first stop i'm looking at, is whether i've created the elements correctly.
I've tried populating the textarea with "value=" and "innerHTML=" and "createTextNode('abc')" etc etc ... but as yet to no avail .... not much hair left !!!!

Here's the main code ... hope theres something obvious in there !!!

Thanks in advance !!
(ps. IE only for this one )


function makeCritEntry(inID, inDest, inTitle, inGroup){
var tbl
var tbd
var tr
var td
var ta
var sel
var dest

if(!document.getElementById(inDest)){return false}
this.fld = inID
this.group = inGroup;
this.id = this.fld + inGroup;
tbl = document.createElement("TABLE");
tbd = document.createElement("TBODY");
tr = document.createElement("TR");
td = document.createElement("TD");
tr2 = document.createElement("TR");
td2 = document.createElement("TD");
ta = document.createElement("TEXTAREA");
sel = document.createElement("SELECT");
tbl.style.setAttribute('cssText', 'padding:0px;margin:0px;border-collapse:collapse;',0);
sel.par = this;
sel.attachEvent('onkeyup',delEntry);
sel.id = "critcbo_" + this.id;
sel.setAttribute("style","z-index=101;");
sel.multiple = true;
ta.par = this;
ta.value = 'x';
ta.attachEvent('onkeypress',absEntry);
ta.attachEvent('ondblclick',showCritSel);
ta.attachEvent('onfocus',selTxt);
ta.id = "critTa_" + this.id;
ta.rows = "1"; ta.cols = "25";
// ...also tried ta.setAttribute("cols","20");
dest = document.getElementById(inDest);
dest.appendChild(tbl);
tbl.appendChild(tbd);
tbd.appendChild(tr);
tr.appendChild(td);
td.appendChild(ta);
tbd.appendChild(tr2);
tr2.appendChild(td2);
td2.appendChild(sel);

this.tbd = tbd;
this.ta = ta;
this.sel = sel;
}
 
Sort by date Sort by votes
yeah, got the ondblclick event attached in that code pasted .... nothing recognised outside of the populated text space.
 
Upvote 0 Downvote
Hey, it works ok for me. I edited some of your code, but here is what I had

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

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

function makeCritEntry(){
    var tbl
    var tbd
    var tr
    var td
    var ta
    var sel
    var dest

    //if(!document.getElementById(inDest)){return false}
      //this.fld = inID
      //this.group = inGroup;
      //this.id = this.fld + inGroup;
      tbl = document.createElement("TABLE");
      tbd = document.createElement("TBODY");
      tr = document.createElement("TR");
      td = document.createElement("TD");
      tr2 = document.createElement("TR");
      td2 = document.createElement("TD");
      ta = document.createElement("TEXTAREA");
      sel = document.createElement("SELECT");
      tbl.setAttribute('cssText', 'padding:0px;margin:0px;border-collapse:collapse;',0);
      sel.par = this;
      sel.attachEvent('onkeyup',delEntry);
      sel.id = "critcbo_" ;
      sel.setAttribute("style","z-index=101;");
      sel.multiple = true;
      ta.par = this;
      ta.value = 'x';
      ta.attachEvent('onkeypress',absEntry);
      ta.attachEvent('ondblclick',showCritSel);
      ta.attachEvent('onfocus',selTxt);
      ta.id = "critTa_";
      ta.rows = "1"; ta.cols = "25";
   // ...also tried ta.setAttribute("cols","20");
      dest = document.getElementById('content');
      dest.appendChild(tbl);
      tbl.appendChild(tbd);
      tbd.appendChild(tr);
      tr.appendChild(td);
      td.appendChild(ta);
      tbd.appendChild(tr2);
      tr2.appendChild(td2);
      td2.appendChild(sel);

      this.tbd = tbd;
      this.ta = ta;
      this.sel = sel;
}

function delEntry() {
   alert('delentry');
}

function absEntry() {  }

function showCritSel() { }

function selTxt() { window.event.srcElement.select(); }


window.onload = function() {
   makeCritEntry();
};

</script>

</script>




</head>


<body>

<div id="content"></div>
</body>
</html>
 
Upvote 0 Downvote
Slept and now awake (as i get).
Thanks for confirming the problem wasnt in the code itself.. so this morning I set about attackking from the css angle.

I've finally (must fine tune my debugging technique) narrowed it down to a "body{height:100%;}" statement in the css.

In my code, removing this, removes the problem.
However, adding that attribute to your stand-alone code, doesnt reproduce the problem.

I my original, these textareas have overflow-Y:hidden, are in a table, the table is within a div which has overflow-Y:scroll, and the whole lot in anoher div which forms part of a sliding menu .... my only guess is that 2 or more of these facts in combination are producing the wierd textarea effect.

Will dig and post findings !
Sorry I can't post complete code & css .. but there's way too much and its all on an internal intranet :(


 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
299
Kennelbloke
Kennelbloke
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
560
ggriffit
ggriffit
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
216
rogerte
rogerte
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
228
JScannell
JScannell
mayamanako
  • Locked
  • Question
Only Visible Radio Buttons Are Required 1
Replies
4
Views
108
mayamanako
mayamanako

Part and Inventory Search

Sponsor

Back
Top