2

How can I prevent the default behavior of closing the x-editable input box when the focus changed to something else?.

My requirement is to keep the input box open until a click on the tick or cross button happens.

Kanchana Randika
  • 550
  • 2
  • 12
  • 27

1 Answers1

7

I believe you are looking for {onblur: "ignore"}.

From the documentation:

Action when the user clicks outside the container. Can be cancel|submit|ignore.
Setting ignore allows having several containers open.

Please see this fiddle, or the below demo.

$(function() {

  $.fn.editable.defaults.mode = 'inline';
  $('#publicname-change').editable({ onblur:"ignore"})

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<link href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/>


<div class="control-group control-group-inline">
  <div class="controls">
    <a href="#" id="publicname-change" class="editable editable-click inline-input">Mr.Rohith</a>
  </div>
</div>
Just a student
  • 10,560
  • 2
  • 41
  • 69
Rohith K P
  • 3,233
  • 22
  • 28
  • 1
    It is very important to always indicate that you quote some other page. Also, always try to make your answers self-contained, so that they are still valid when a site you link to goes offline (JSFiddle in this case). I have edited your answer to do so, hope you don't mind and can apply this in the future :-) – Just a student Apr 25 '17 at 14:44
  • @Ninja This solved my problem simply like 123 :)! Really appreciate your support! Thank you! – Kanchana Randika Apr 26 '17 at 05:42