如何在更改为输入字段

时间:2015-12-04 10:19:37

标签: javascript html

我想制作像MySQL这样的可编辑列表但是当它改为输入字段时我无法获得相同的DIV ID ...任何人都可以告诉我如何做到这一点......

这是我的代码......



//<![CDATA[
$(window).load(function() {
  $.fn.editable = function() {
    var textBlocks = $(this);

    for (var i = 0; i < textBlocks.length; i += 1) {
      var textBox = $('<input class="my-text-box" onchange="myFunction(this.value)" />');
      var textBlock = textBlocks.eq(i);
      textBox.hide().insertAfter(textBlock).val(textBlock.html());
    }

    textBlocks.dblclick(function() {
      toggleVisiblity($(this), true);


    });

    $('.my-text-box').blur(function() {
      toggleVisiblity($(this), false);
    });

    toggleVisiblity = function(element, editMode) {
      var textBlock,
        textBox;

      if (editMode === true) {
        textBlock = element;
        textBox = element.next();
        textBlock.hide();
        textBox.show().focus();
        textBox[0].value = textBox[0].value;
      } else {
        textBlock = element.prev();
        textBox = element;
        textBlock.show();
        textBox.hide();
        textBlock.html(textBox.val());
      }
    };
  };

  var $edit = $('.makeEditable').editable();
});


function myFunction(val) {
  document.writeln(val);
}
&#13;
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<div class="makeEditable" id="fname">First Name</div>
<div class="makeEditable" id="lname">Last Name</div>
<div class="makeEditable" id="contacts">00 000 0000</div>
<div class="makeEditable" id="email">test@yourdomain.com</div>
&#13;
&#13;
&#13;

请帮助我......

1 个答案:

答案 0 :(得分:0)

div id更改为输入字段时,您可以获得if (editMode === true) {} var divId = element.attr('id'));

if (editMode === true) { var divId = element.attr('id')); console.log(divId); } 块中添加InputStream,如下所示。

Reader

希望它会对你有所帮助。