forms - JavaScript action inside HTML5 oninput attribute? - Stack Overflow

admin管理员组

文章数量:1405340

I have been learning HTML5. One of the examples I have encountered uses an input element of type range and an output element (this example currently only works in Chrome, Safari and Opera). The following form produces a slider with the result echoed to the output element.

<form>
   <p>
      <input type="range" id="slideValue" value="50" 
          oninput="slideCurrent.value = parseInt (slideValue.value);" />
      <output id="slideCurrent">50</output>
   </p>
   <input type="submit" value="Send">
</form>

My question concerns the oninput attribute. The oninput attribute contains JavaScript. In pre-HTML5 JavaScript I monly see JavaScript references to this.value. However in the above HTML5 example the references to slideCurrent and slideValue work (apparently without the need to use getElementById). I believe this is a new way for JavaScript to behave.

Is this new JavaScript method of action documented somewhere?

I have been learning HTML5. One of the examples I have encountered uses an input element of type range and an output element (this example currently only works in Chrome, Safari and Opera). The following form produces a slider with the result echoed to the output element.

<form>
   <p>
      <input type="range" id="slideValue" value="50" 
          oninput="slideCurrent.value = parseInt (slideValue.value);" />
      <output id="slideCurrent">50</output>
   </p>
   <input type="submit" value="Send">
</form>

My question concerns the oninput attribute. The oninput attribute contains JavaScript. In pre-HTML5 JavaScript I monly see JavaScript references to this.value. However in the above HTML5 example the references to slideCurrent and slideValue work (apparently without the need to use getElementById). I believe this is a new way for JavaScript to behave.

Is this new JavaScript method of action documented somewhere?

• javascript
• forms
• html

Share Improve this question Follow edited Dec 7, 2011 at 22:44 Bergi 667k161161 gold badges1k1k silver badges1.5k1.5k bronze badges asked Dec 7, 2011 at 22:19 Mark McLarenMark McLaren 11.5k33 gold badges5252 silver badges8080 bronze badges 4

• 2 stackoverflow./a/2204568/34397 – SLaks Commented Dec 7, 2011 at 22:22
• 1 This could be related: stackoverflow./questions/3434278/… – Digital Plane Commented Dec 7, 2011 at 22:22
• It is not new feature, just not very often used. See this – Bakudan Commented Dec 7, 2011 at 22:26
• I've found it used here w3schools./html5/tag_output.asp. Maybe the use of this mechanism is being encouraged somewhere in relation to working with HTML5? – Mark McLaren Commented Dec 20, 2011 at 13:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Code within inline event handlers is scoped to the element, as if it was in a with block.
Therefore, you can use properties of the element as global variables.

This is a little-known and dangerous feature, and is not new to HTML5.

It's a method introduced by IE, that elements' names and ids are references in the global scope. Other browsers have copied it, but it's considered as bad use. Mozilla throws a warning:

element referenced by ID/NAME in global scope. Use WC3 standard document.getElementById() instead...

You can find lots of threads when googling for that. A good article can be found here. In the event handler you can use this as a reference to the element, but the output element should be acessed by standard dom methods.

EDIT: Oh shit, yes, its in the spec: http://www.whatwg/specs/web-apps/current-work/#dom-window-nameditem. But with a big red alert:

It is possible that this will change. Browser vendors are considering limiting this behaviour to quirks mode. Read more...

See also Mozilla bugs 303420 and 602381

本文标签： formsJavaScript action inside HTML5 oninput attributeStack Overflow