jQuery addClass example

Change class name on click in jQuery

HTML

<input id="test" name="test" type="text" placeholder="To check clipboard">

<input id="barcode" name="barcode" 
readonly value="" type="text" placeholder="Scan Barcode" required>

<label id="label" type="button" for="barcode" class="your-cool-class-to-make-this-look-like-an-input">
    <span class="placeholder">My placeholder</span>
</label>

<button id="submit" type="button">
    SUBMIT
</button>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #FFF;
}

#barcode{
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

#label {
  padding: 0 10px;
  margin: 10px auto;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  background: #FFF;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  width: 100%;
  cursor: text;
  color: #000;
  text-align: left;
}


#label > span.placeholder{
  opacity: 0.87;
}

#barcode:focus + #label{
  border-color: blue;
}

JavaScript

var $barcode = $("#barcode");
var $test = $("#test");
var $label = $("#label");
var $submit = $("#submit");
var ro = "readonly";
var ph = "<span class='placeholder'>My placeholder</span>";

// handle click and add class
$submit.on("click", function(){
  var val = $barcode.val();
  $test.val(val || "empty");
  $label.text(val || "empty");
});

$barcode.on("input", function(){
		$label.html($barcode.val() || ph);
});

$barcode.on("blur", function(){
		$barcode.attr(ro, ro);
});

$barcode.on("focus", function(){
	setTimeout(function(){
  $barcode.removeAttr(ro);
  },1);
	console.info("barcode focused!");
})