Easiest way is to put inputs in an extra div-element. Inputs needs at least an 'id' to be replaced.
If an label is associated with the element the 'click' Event will be redirect to the replaced one.
$("input.group2").controlReplace();
Check your console output!
$("input.group3").controlReplace({
additionalClass: "my-class",
afterReplace: function(element) {
console.log("replaced: " + element.attr("name"));
},
onChange: function(name, newValue) {
console.log(name + ": " + newValue);
inputCss: {
position: "absolute",
top: 2,
left: 2
}
});
Adds one or more additional css classes to the replacement element.
$("input").controlReplace({additionalClass: "my-class"});
A callback function; will be thrown after input has been replaced.
$("input").controlReplace({afterReplace: function(element) { console.log("replaced: " + element.attr("name")); }});
A callback function; will be thrown on value change.
$("input").controlReplace({onChange: function(name, newValue) { console.log(name + ": " + newValue); }});
Set css style options to the original element.
$("input").controlReplace({inputCss: {position: "absolute", top: 2, left: 2}});