Re: Need help with textboxes

On Sep 16, 7:10 pm, Thomas 'PointedEars' Lahn <PointedE...@xxxxxx>
wrote:
Daz wrote:
You'll find that you get some strange behaviour, however, as the event
fires the moment it's pressed, which is before it actually types a
character into the input box. I would recommend using "onkeyup"
instead.

That part is actually the only good advice in your posting.

Ouch... My purpose was to give an example that could be seen working,
not do do it for him. He wanted to know how to achieve, and I did that
in my example. It's not meant to be code that can be copied and handed
in as school work (if that's what it's for).

If it's important to you that the characters appear almost
instantaneously, you can use a timer. This means that just about each
character should appear as it's entered if the timer function executes
often enough, and will compensate for when a user holds down a key.

It will not, that is bad advice. ECMAScript implemenations are
single-threaded, and system timer tick intervals may be higher
than the 50 ms alotted here.

It is also not necessary to use a timer function for "instantaneous"
appearance. Listening to mouse and keyboard events suffices.

Are you talking about recursion? I'd be interested to see your
implementation.

<html>

A DOCTYPE declaration is missing before.

<head>

A declaration of the used encoding and the default scripting language is
missing here.
I know. Firstly, this is a JavaScript UseNet group, not HTML. Also, as
I mentioned before, it was a quick example that shows a possible
method of doing it. The aim was to inspire, not to do it for the OP.

<script type="text/javascript">
function copyText() {
document.forms['myForm'].txtOutput.value =
document.forms['myForm'].txtEnterValue.value
}

Yuck. This can be improved in a number of ways, including the most simple
one of assigning the reference to a variable:

var f = document.forms['myForm'], es = f.elements;

And then:

es["txtOutput"].value = es["txtEnterValue"].value;

window.onload = function() {


The example was meant to be clear. I didn't say it was the best way,
nor did I state the code was optimized for speed. In fact, I
specifically said that my example was "far from perfect". "Far"
implies a long way. There's always room for improvement.

This is a proprietary definition of an event listener, inherently
error-prone. It is not necessary, as the HTML `body' element has
an intrinsic standards-compliant `onload' event handler attribute
to facilitate this.

setInterval("copyText()", 50)

Because of the unknown timer tick interval, it is better to use
setTimeout() instead of setInterval() for time-critical processes.

That, I didn't know. What does setInterval() use then, if it's not
system ticks? I was always under the impression that they were built
on the same foundations, but just worked differently.

Both methods are proprietary properties of Window host objects and
should be called so: window.setTimeout(...), window.setInterval(...)

I know this, although I don't see much of a point... I suppose you
write all of your global variable and functions like that too?

}
</script>
</head>

<body>

<body onload="...">

See above.

<form name="myForm">

The `action' attribute is required. The `name' attribute would be
unnecessary if you simply passed the element reference "onkeyup" with
`this.form' or `this' (the latter being most compatible).

I know, but again, it was a quick example to outline a possible
solution, not to demonstrate perfect HTML. I don't recall the OP
asking about how to write perfect HTML (let me draw your mind back to
the bit where I said "My code is far from perfect").


<p>
Type a word.<br>
<input type="text" name="txtEnterValue">

`type="text"' is redundant as that is the default value.

<input name="txtEnterValue"
onkeyup="copyText(this.form)">

</p>

Nonsense. The `p' element is to mark up *p*aragraphs. There is no
paragraph here, so the `div' element should be used instead.

That was the OP's code, and if that's what he wanted to do, that's
down to him. What's wrong with just answering a question rather than
answering a whole heap of questions he didn't even ask?


<p>
The result should appear in this box as you type.<br>
<input type="text" name="txtOutput">

See above.

</p>
</form>
</body>
</html>

Your markup is far from being syntactically or semantically correct.
Due to the former, it is unlikely to work consistently:http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

Validation may reveal your problem - It wouldn't. The problem was with
the method (not even the JavaScript itself...

Validation may solve your problem - Again, it wouldn't.

Valid markup is hard enough to debug already - Agreed, but I didn't
ask you for help with bad markup from me. In fact, I didn't even debug
as such. I just offered a solution. I thought this group was aimed at
JavaScript, not HTML. It was hardly a massive script, and if you
didn't want to help, I have no problem with that. I was in the
position to help, so I did.

Validation is an indicator of cluefulness - I couldn't agree more, but
we are talking about HTML validation for a JavaScript problem, when
you know as well as I do that wasn't the problem. Also, it's pretty
obvious that the OP isn't experienced.

For syntactical correctness, consult at leasthttp://validator.w3.org/

I do... Plus HTML Tidy is an integral part of my development kit...

Note that here, I've used a different method to get the information
from the form. All forms and their children are stored in an array
called "forms",

`forms' is not an array, see below. `children' is too limited, because
a reference to a HTMLFormElement includes access to all its descendant elements.

That was my bad. I meant to actually say "object". That's exactly what
it is, but it does "act" like a multi-dimensional array.

which is a property of the "document". So, to access children in a form
with the name "anotherForm", you could do this:

That is not accessing `children' of/in the form, it is accessing form
controls represented by DOM objects, which is quite different. `children'
would include all child elements. Neither need form controls be child
elements of the `form' element, nor can a form contain only form controls.

I agree with you there. It is limited, but I was trying to keep it
simple.

document.forms.anotherForm.elementName

This is completely proprietary referencing, and so inherently error-prone.
Mostly standards-compliant and fully backwards-compatible referencing of the
above would be

document.forms["anotherForm"].elements["elementName"]

You can also access it like this:

document["forms"]["anotherForm"]["someChildName"]

That is not standards-compliant either.

document["forms"]["anotherForm"]["elements"]["someChildName"]

would be.

Please could you post a link to the documentation that states this? I
have to admit, I did go through a time when I didn't know whether to
use dot notation or object literals. Generally, I use dot notation
unless I need to call on a dynamically generated property.

I use jslint.com to validate my HTML.

I put both of our lines of script into a variable, and checked it with
JSLint.

var el = document["forms"]["anotherForm"]["elements"]["someChildName"]
Error:

Implied global: document

Problem at line 1 character 19: ['forms'] is better written in dot
notation.

var el = document["forms"]["anotherForm"]["elements"]["someChildName"]

Problem at line 1 character 28: ['anotherForm'] is better written in
dot notation.

var el = document["forms"]["anotherForm"]["elements"]["someChildName"]

Problem at line 1 character 43: ['elements'] is better written in dot
notation.

var el = document["forms"]["anotherForm"]["elements"]["someChildName"]

Problem at line 1 character 55: ['someChildName'] is better written in
dot notation.

var el = document["forms"]["anotherForm"]["elements"]["someChildName"]

Problem at line 1 character 71: Missing semicolon.

var el = document["forms"]["anotherForm"]["elements"]["someChildName"]

------------------------

var el = document.forms.anotherForm.elements.someChildName;

Error:

Implied global: document

OK, so I got one error, and perhaps should have prefix "document" with
"window".

If you think my single line of code is wrong, perhaps you should take
it up with Douglas Crockford? I don't mean that in a horrible way, I'd
just be interested to see what he says.

Again, I didn't say my methods were correct, I simply stated that it
was another way of doing it.


Although it should only be used if needed, as dot notation is better

It would only be better if standards-compliant referencing was used.

and more consistent,

No. Bracket property accessors allow their argument to be any string value.
Dot property accessors require their operand to be an identifier. Using
dot property accessors in favor of bracket property accessors will cause a
mix of dot and bracket property accessors in cases where the control name is
not an identifier. This is explained in the FAQ.

However, W3C DOM Level 2 HTML specifies that referencing the items of a
HTMLCollection object in an ECMAScript implementation is (only) supported
through the bracket property accessor, so there is not much choice here:

You mean "dereferencing"?

http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html
(see the description for the namedItem() method of HTMLCollection objects)

and looks neater.

Only a matter of opinion.

What you see above, is basically a multi dimensional array.

Not at all. It is merely a sequence of property accesses, where the first
property access is resolved first, then the second, and so forth.

Then we'll have to agree to disagree. Perhaps it's just me, but it
sounds like you just "described" a multi-dimensional array. I didn't
say it "was" a multi-dimensional array, I simply compared it to one.

Here's a multi-dimensional array:
var arr = [];
arr["first_property"] = 1;
arr["second_property"] = 2;
arr["third_property"] = [];
arr["third_property"]["first_property"] = 4;
arr["third_property"]["second_property"] = function() { alert(5); };
arr["third_property"]["third_property"] = 6;

alert(arr.second_property);
arr.third_property.second_property();

Here's the equivilant object:

var obj = {}
obj.first_property = 1;
obj.second_property = 2;
obj.third_property = {}
obj.third_property.first_property = 4;
obj.third_property.second_property = function() { alert(5) };
obj.third_property.third_property = 6;

alert(obj.second_property);
obj.third_property.second_property();

They are different methods of "Basically" achieving the same thing.
Array() is based on an object (as is everything else), the only
fundamental differences are the properties and methods.

Please don't start ranting about recommendations and standards. I am
well aware that it's not standard, but it should illustrate that when
I compared an object is basically a multi-dimensional array, that
there is truth in that. Again, I didn't say "it was", I simply
compared them.

ECMAScript implementations have no built-in concept of associative arrays,
i.e. arrays where the index may also be a non-numeric string. If such
referencing is used on Array objects, that is not adding elements to the
array data structure, but adding properties to the Array object which
encapsulates that data structure. As indicated by the Array object's
length property to yield an unchanged value.

You can also call on a form by it's position in the document array:

Neither `document' nor `document.forms' are arrays. `document' is a
reference to an HTMLDocument object, and `document.forms' is therefore
a reference to an HTMLCollection object.

I didn't say it was...

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268



document.form[0]
[...]
My examples are from from perfect.

Your misconceptions about the used languages and interfaces are numerous.
You should refrain from giving further advice until you have grasped the
basics of that, because any advice you might give in spite of that has a
very high probability of being bad advice. That would force more
knowledgeable people to correct most if not all of your postings and to
waste their time with that, in place of or in addition to investing time
to post good advice.

So in your effort to "not do someone's homework for them", you've
actually gone and done it for them.

PointedEars
--
"Use any version of Microsoft Frontpage to create your site. (This won't
prevent people from viewing your source, but no one will want to steal it.)"
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>

Haha, nice signature!

.

Relevant Pages

  • Re: Need help with textboxes
    ... That part is actually the only good advice in your posting. ... one of assigning the reference to a variable: ... All forms and their children are stored in an array ... No. Bracket property accessors allow their argument to be any string value. ...
    (comp.lang.javascript)
  • Re: Need help with textboxes
    ... The JavaScript 1.5 Reference already states: ... All forms and their children are stored in an array ... use dot notation or object literals. ... No. Bracket property accessors allow their argument to be any string value. ...
    (comp.lang.javascript)
  • Re: VB-101: Passing Arrays ByVal vs ByRef
    ... changed if an array is passed by Val. ... ' new reference ... As each function creates a new array object, ... 'secondArray' and 'secondArrayCopy'. ...
    (microsoft.public.dotnet.languages.vb)
  • Re: Garbage Collection Issues in long-standing services
    ... the pinned array should get unpinned or ... The receive case is done quite well, I do create a 4K buffer and reuse it ... and remove the reference to my wrapper socket class, ...
    (microsoft.public.dotnet.languages.csharp)
  • Re: How to give selective access to the methods in a class?
    ... different memory locations at different times. ... The reference still leads to the ... So array resizing ... program pushes certain objects into the circular buffer, ...
    (comp.lang.java.programmer)