Мне нужна твоя помощь с чем-то. Я пытаюсь добавить пользователю возможность в режиме реального времени редактировать список UL LI, нажав на элемент LI. Затем, после нажатия на элемент LI, элемент изменяется на поле ввода с текущим текстовым значением LI.

Затем, когда пользователь щелкает элемент LI, поле ввода исчезает, и элемент LI возвращается в свое нормальное состояние с новым обновленным значением.

Я пытаюсь выполнить вышеизложенное, однако, с текущим состоянием моего кода, он просто добавляет другое поле и фактически не позволяет мне щелкнуть внутри него, чтобы добавить новое значение. А также, когда я нажимаю на новый элемент LI, он просто добавляет еще одно поле и так далее, и так далее.

Вот скрипка: https://jsfiddle.net/0o0n8rea/

Вот код, о котором идет речь:

window.onload = function() {

    $("#refdocs_list li").click(function(){

        $(this).html('<input type="text" value='+ $(this).text() +'>').focus()

    });

    $("#refdocs_list li").focusout(function(){

    });

}

Вот разметка HTML:

<div class="field_outline" style="background: #FFF; min-height: 75px; max-height: 300px; overflow-y: auto;">

    <ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;">

        <li>test1</li>
        <li>test2</li>
        <li>test3</li>

    </ul>

</div>
2
BobbyJones 31 Авг 2017 в 18:54

5 ответов

Лучший ответ

Вы можете обернуть span вокруг текста, а затем заменить этот элемент на input и наоборот, используя jQuery replaceWidth() и общий атрибут в качестве селектора, например data-id="editable-list-item" или Другой.

Похоже на это:

$("#refdocs_list li").on('click', 'span[data-id="editable-list-item"]', function() {
  var $input = $('<input type="text" data-id="editable-list-item">');
  $input.val($(this).html());
  $(this).replaceWith($input);
  $input.focus();
});

$("#refdocs_list li").on('focusout', 'input[data-id="editable-list-item"]', function() {
  var $span = $('<span data-id="editable-list-item">');
  $span.html($(this).val());
  $(this).replaceWith($span);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;">
  <li><span data-id="editable-list-item">test1</span></li>
  <li><span data-id="editable-list-item">test2</span></li>
  <li><span data-id="editable-list-item">test3</span></li>
</ul>
2
Nope 31 Авг 2017 в 16:09

Смотрите ниже пример:

$("li").click(function(){
	
		$(this).html('<li><input type="text" value="'+ $(this).text() +'"></li>').focus()
	
	});
	
	$("#refdocs_list li").focusout(function(){

	});
input[type='text']{
  width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field_outline" style="background: #FFF; min-height: 75px; max-height: 300px; overflow-y: auto;">
	
		<ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;">
		
			<li>test1</li>
			<li>test2</li>
			<li>test3</li>
		
		</ul>
		
	</div>
-1
Maulik Barad 31 Авг 2017 в 16:04

Вот простое, рабочее решение. Это не идеально, но должно быть хорошей отправной точкой.

$('li').on('click',function() {
  $(this).children('.value').addClass('hidden');
  $(this).children('.edit').removeClass('hidden');
});

$('.edit').on('change',function() {
  $(this).siblings('.value').html($(this).val());
  $('.edit').addClass('hidden');
  $('.value').removeClass('hidden');
});
.hidden { 
  display: none; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span class="value">Value 1</span>
    <input class="edit hidden" type="text" value="Value 1" />
  </li>
  <li>
    <span class="value">Value 2</span>
    <input class="edit hidden" type="text" value="Value 2" />
  </li>
  <li>
    <span class="value">Value 3</span>
    <input class="edit hidden" type="text" value="Value 3" />
  </li>
</ul>
0
Devil's Advocate 31 Авг 2017 в 16:06

Для простоты добавьте contenteditable свойство элемента.

< Сильный > JSFiddle

скрипка

3
Script47 31 Авг 2017 в 15:58

Может ли что-то подобное для вас сработать?

<ol contenteditable="true">
  <li>
    Line 1
  </li>
  <li>
    Line 2
  </li>
</ol>
1
Nope 31 Авг 2017 в 16:20