JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" name="test" id="test" value="test" class="default" />
<script>
$(document).ready(function() {
initiateFieldLabels();
});
function initiateFieldLabels(){
$("input.default").live({
focus: function() {
var value =$(this).val();
if(!$('#'+$(this).attr('id')+'-default').length){
$(this).after('<input type=\"hidden\" id=\"'+$(this).attr('id')+'-default\" value=\"'+value+'\" />');
}
$(this).val('');
$(this).removeClass('default')
},
blur: function() {
alert('hello');
var value = $('#'+$(this).attr('id')+'-default').val();
$(this).val(value);
$(this).addClass('default');
}
});
}
</script>
</body>
</html>