Question

我正在使用getElementsByClass并尝试用仅具有类的div替换输入框。但在我的代码中，我使用的是数组0。

document.getElementsByClassName("item")[0].innerHTML = value;

但我只想更换当前编辑的输入框

http://jsfiddle.net/Gr4yy/29/

Answer 1

试试这个：

var cnt=0;
$(document).on("click", ".item", function () {
cnt++;
var input = $('<input />', {
    'type': 'text',
    'id': 'edit-text'+cnt,
    'class': 'edit-text',
    'value': $(this).text()
});
$(this).replaceWith(input);

$(document).on("blur", ".edit-text", function () {

        var value = $(this).val();
        $(this).replaceWith('<div class="item">'+value+'</div>');


});
});

Answer 2

我认为你想要做的只能用css完成，使用JS只是有点过分

input {
  display: block;
}
.noinput {
  border-style: none;
  background-color: transparent;
}
.noinput:focus {
  border: 1px solid #000000;
  background-color: #ffffff;
}


<input class="noinput" type="text" placeholder="Date" value="">
<input class="noinput" type="text" placeholder="Date" value="">
<input class="noinput" type="text" placeholder="Date" value="">

https://jsfiddle.net/ndcdwx8q/

好的，因为你必须使用Jquery ......它可以很容易地完成

$('.item').click(function (e) {

    var $currnetDiv = $(this); // it will be used to replace input on blur
    var divText = $currnetDiv.text();

    /* create input element with text from div as value*/
    var $input = $('<input type="text">').val(divText);

    $currnetDiv.replaceWith($input); 

    /* on blur simply replace current input with previously cached div*/
    $input.focus().blur(function(){ 
      $currnetDiv.text($(this).val()); //grab value form input and append it as text to the div
      $input.replaceWith($currnetDiv);
    });

  });

http://jsfiddle.net/Gr4yy/36/

Answer 3

您可以在替换控件时添加innerHtml

$(document).on("click", ".item", function () {
        var input = $('<input />', {
            'type': 'text',
            'id': 'edit-text',
            'value': $(this).text()
        });
        $(this).replaceWith(input);
        document.getElementById("edit-text").focus();
        $(document).on("blur change", "#edit-text", function () {
            setTimeout(function () {
                var value = input.val();
                input.replaceWith('<div class="item">'+value+'</div>');
                //document.getElementsByClassName("item")[0].innerHTML = value;
            }, 100);
        });
    });

Answer 4

$(document).on("click", ".item", function () {
 var input = $('<input />', {
        'type': 'text',
        'id': 'edit-text',
        'value': $(this).text()
    });
   $(this).replaceWith(input);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="item">editing text</div>
<div class="item">Date</div>
<div class="item">Date</div>
<div class="item">Date</div>
<div class="item">Date</div>
<div class="item">Date</div>
<div class="item">Date</div>

如何使用getElementsByClass更改当前编辑的类？

4 个答案: