Каждое слово редактируется при двойном щелчке

Question

Here's the fiddle Я работаю над.

Мне нравится, чтобы каждое из слов в абзаце редактировалось в текстовом поле при двойном щелчке слова, а слово было перестроено с новым вводом при фокусировке (при нажатии на пустую часть страницы) ,

Я пробовал, но мне пришлось использовать <ul> и <li> теги, что не очень практично. Также есть пара вопросов:

-Когда в текстовом поле имеется более одного слова, оно показывает только первое слово при двойном щелчке. (Просто попробуйте отредактировать тег 'dolor sit amet', он показывает только «dolor»)

-Как дважды щелкнуть, иногда он выбирает все (в синем), не смог найти решение.

-Размер текстового поля не зависит от длины слова. Наверное, это легко, но мне что-то не хватает.

Можете ли вы мне помочь?

Answer 1

Существует ряд проблем. Вы можете сослаться на это (я думаю, это может быть полезно для вас).

1.Если в текстовом поле имеется более одного слова, оно показывает только первое слово при двойном щелчке. (Просто попробуйте изменить тег «Dolor сидеть Амет», «Dolor» это только показывает)

Использование "<input type='text' value="+oriVal+">"

2. размер текстового поля не регулируется по длине слова. Наверное, это легко, но мне что-то не хватает.

Найти ширину выбранного li и применить эту ширину к text box.

var width = $(this).width(); 
    $(this).text(""); 
    $("<input type='text' style='width:"+width+"px'value='"+oriVal+"'>").appendTo(this); 

Вы можете проверить демо here.

UPDATE

Как ваши требования Я обновил ответ.

В зависимости от text в input boxwidth в text box должно измениться на keypress/keyup события.

Также input box должен focus out по телефону enterkey press.

$("#parentUL").on('keyup','li', function(e){ 
    var width = $(this).width(); 
    if(e.which == 13) { 
     $("input").focusout(); 
    }else{ 
     $("input").css('width',width); 
    } 
    }); 

Answer 2

1) "<input type='text' value="+oriVal+">" будет <input type='text' value=word1 word2>" если oriVal - word1 word2. Посмотрите, как вам не хватает кавычек, и браузер примет слово1 как значение value и обработает word2 как свойство булевого флага. Измените его на "<input type='text' value='"+oriVal+"'>", и все будет в порядке.

Тем не менее, лучшим способом будет var ele = $("<input type='text'>");ele.val(oriVal). Это позаботится обо всех проблемах с кавычками и побегами.

2) Сделайте свой контент не поддающимся выбору. CSS user-select: none (возможно, вам необходимо добавить префикс поставщика, такой как -webkit-user-select: none) работает в большинстве современных браузеров, есть трюки для старых браузеров.

3) Это непросто, особенно в отношении проблем совместимости браузеров. Почему бы не попробовать с contenteditable вместо использования текстового поля ввода. Почти каждый браузер поддерживает его сейчас.