JSFiddle - React, Tailwind, and code Playground

by Chris Rebert

HTML

<input type="text" value="AAA" id="q">

JavaScript

var input = document.getElementById('q');
input.value = "BBB";
input.type = "file";
// At this point, the internal value should either be "BBB"
// or the empty string (see http://w3bug.com/27791 )
input.type = "text";
// Per https://html.spec.whatwg.org/multipage/forms.html#text-(type=text)-state-and-search-state-(type=search):dom-input-value-value ,
// changing from type="file" to type="text" changes the
// mode (https://html.spec.whatwg.org/multipage/forms.html#dom-input-value-value )
// from "filename" to "value".
//
// Step 2 of https://html.spec.whatwg.org/multipage/forms.html#input-type-change
// therefore applies, and it says:
// "then set the value of the element to the value of the value content attribute, if there is one, or the empty string otherwise"
alert("The value property (" + JSON.stringify(input.value) + ") should equal the value attribute (" + JSON.stringify(input.getAttribute('value')) + ")");