jQuery addClass example

Change class name on click in jQuery

by hmdadou

HTML

<div id="container">
  <p>Div on the fly</p>
  <p>
    <input>

  </p>


  <p>
    <textarea rows="4"></textarea>
  </p>

</div>

CSS

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

.input-target {
  position: relative !important;
  background: #efefef;
}

.keyboard {
  background: grey;
  color: #fff;
  display: block;
  position: absolute;
  z-index: 99999999;
}

#container {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

JavaScript

$('body').find(':input').addClass('input-target');
$(".input-target").each(function() {
  $(this).on('focus', function() {
    $(this).after(' <div class="keyboard" style=""><input type="text" class="first"><button class="close-keyboard">X</button></div>');
  })


});

$(document).ready(function() {

  $(document).on('keyup', '.first', function() {

    $(".first").each(function() {

      $('.input-target').val($(".first").val());

    });
  });
});


$(document).bind('click', function(e) {
  var target = $(e.target);
  if (target.is('.keyboard')) {
    e.preventDefault(); // if you want to cancel the event flow
    // do something
    //  alert('clicked on keyboard class');
  } else if (target.is('.close-keyboard')) {
    e.preventDefault();
    // do something else
    // alert('clicked on close-keyboard class');
    $('.keyboard', this).hide();
  }
});