form-js
Version:
Create better ui form elements. Supports IE9+, all modern browsers, and mobile.
71 lines (53 loc) • 1.58 kB
HTML
<html>
<head>
<style>
button {
display: inline-block;
}
/* The input field container */
.my-field {
display: inline-block;
}
/* The input field element */
.my-field-input {
}
/* when the field is in focus */
.my-field-active {
}
</style>
</head>
<body>
<!-- our starter html -->
<h1>The world's simplest input field</h1>
<input type="text" value="" name="words" id="my-text" />
<button id="enable-btn">Enable</button>
<button id="disable-btn">Disable</button>
<p><strong>Current Value:</strong> <span id="input-value"></span></p>
<!-- don't forget requirejs -->
<script src="../dist/form.js"></script>
<script>
var valueContainer = document.getElementById('input-value');
var enableBtn = document.getElementById('enable-btn');
var disableBtn = document.getElementById('disable-btn');
enableBtn.onclick = function () {
field.enable();
};
disableBtn.onclick = function () {
field.disable();
};
var field = new Form.InputField({
el: document.getElementById('my-text'),
containerClass: 'my-field',
inputClass: 'my-field-input',
activeClass: 'my-field-active',
onKeyDownChange: function (value) {
valueContainer.textContent = value;
}
});
// set the input field's value to a default value on load
var defaultVal = 'newValue';
field.setValue(defaultVal);
valueContainer.textContent = defaultVal;
</script>
</body>
</html>