Bootstrap snippet: dismiss input field

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: input,field

<div class="container bootstrap snippet"> <div class="row"> <div class="col-lg-6 col-lg-offset-3"> <label for="">Please write something and click go</label> </div> <div class="input-group col-lg-6 col-lg-offset-3"> <input type="text" class="form-control" id="cyrillic-input"> <span class="input-group-btn"> <button class="btn btn-default" id="go-btn" type="button">Go!</button> </span> </div><!-- /input-group --> <div class="col-lg-6 col-lg-offset-3"> <h4 id="utf-result">result:</h4> </div><!-- /.col-lg-6 .col-lg-offset-3 --> <div class="col-lg-3"> </div><!-- /.col-lg-3 --> <div class="col-lg-6 col-lg-offset-3"> <img class="thumbnail img-responsive" id="dumy-img" src=";" title=";text="> </div><!-- /.col-lg-6 .col-lg-offset-3 --> <div class="col-lg-3"> </div><!-- /.col-lg-3 --> </div><!-- /.row --> </div><!-- /.container -->
$('#go-btn').click(function () { var btn = $(this); var input = $("#cyrillic-input").val(); input = encodeURIComponent(input); var utf = input.replace(new RegExp("%",'g'), "0x"); $('#utf-result').text(utf); var dummyImage = $('#dumy-img'); dummyImage.attr("src",dummyImage.attr("title") + utf); });

dismiss input field

  May 24th 2014, 00:43