HTML輸入沒有更新值

我有一個很奇怪的問題（至少對我來說）。我動態創建文本框，它工作正常。但問題是，當我嘗試寫入這些內容時，如果檢查了html代碼，我寫的值不會出現。我不知道爲什麼會發生這種情況，或者如何在這個環境下工作。這是我的代碼示例。HTML輸入沒有更新值

<ul class="ml4 js-sortable-buttons list flex flex-column list-reset" data-disabled="false" id="page-content"> 
    <li class="p1 mb1 blue bg-white" id="id"><input type="text" class="textbox" /></li> 
</ul> 
<div class="center py2 ml4"> 
    <div class="js-add-textbox-button button blue bg-white" >add textbox</div> 
    <div class="show_html_button blue bg-white">show html</div>      
</div> 


<!-- <script src="../src/html.sortable.js"></script> --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="html.sortable.min.js"></script> 
<script type="text/javascript"> 
     sortable('.js-sortable-buttons', { 
      forcePlaceholderSize: true, 
      items: 'li', 
      placeholderClass: 'border border-white mb1' 

     }); 
     // buttons to add items and reload the list 
     // separately to showcase issue without reload 
     document.querySelector('.js-add-textbox-button').addEventListener('click', function() { 
      doc = new DOMParser().parseFromString(`<li class="p1 mb1 blue bg-white"><input type="text" class="textbox"></li>`, "text/html").body.firstChild; 
      document.querySelector('.js-sortable-buttons').appendChild(doc); 
      sortable('.js-sortable-buttons'); 
      window.stop(); 
     }); 
</script> 

    <script type="text/javascript"> 
     $(".show_html_button").click(function() { 
      var optionTexts = $("#page-content").clone(true); 
      alert(optionTexts.html()); 
     }); 
</script>

任何幫助將不勝感激。

來源

2017-07-04 Evgeny Sdvizhkov

這可能是到你使用的排序。如果我刪除對它的引用，一切工作正常：https://codepen.io/anon/pen/KqRJLG – hairmot

你看到在控制檯中的任何錯誤？ –

這不是javascript的工作原理。當輸入字段的值更改時，網頁的HTML不會自動更新。

如果你想這樣的功能，你可以這樣做：

$(function(){ 
 
    $('.js-sortable-buttons').on('keyup change paste','input',function(){ 
 
    $(this).attr('value', $(this).val()); 
 
    }); 
 
});

來源

2017-07-04 10:29:28 James

它真的幫了很多，但爲什麼輸入值不會自動更新？ –

HTML'value =「」'*屬性*不與'.value' DOM *屬性*同步，而是'.defaultValue' DOM *屬性*。 'value =「」'屬性將始終反映該字段的默認值，除非該屬性是通過javascript手動更新的。 – James

順便問一下，你能向我解釋爲什麼只有1個文本框工作正常嗎？當我添加另一個文本框時，它們的值不會被更新。非常感謝你。 –

你缺少參考html5Sortable。 https://cdnjs.com/libraries/html5sortable

 sortable('.js-sortable-buttons', { 
 
      forcePlaceholderSize: true, 
 
      items: 'li', 
 
      placeholderClass: 'border border-white mb1' 
 

 
     }); 
 
     // buttons to add items and reload the list 
 
     // separately to showcase issue without reload 
 
     document.querySelector('.js-add-textbox-button').addEventListener('click', function() { 
 
      doc = new DOMParser().parseFromString(`<li class="p1 mb1 blue bg-white"><input type="text" class="textbox"></li>`, "text/html").body.firstChild; 
 
      document.querySelector('.js-sortable-buttons').appendChild(doc); 
 
      sortable('.js-sortable-buttons'); 
 
      window.stop(); 
 
     }); 
 

 
     $(".show_html_button").click(function() { 
 
      var optionTexts = $("#page-content").clone(true); 
 
      alert(optionTexts.html()); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5sortable/0.6.1/html.sortable.min.js"></script> 
 

 
<ul class="ml4 js-sortable-buttons list flex flex-column list-reset" data-disabled="false" id="page-content"> 
 
    <li class="p1 mb1 blue bg-white" id="id"><input type="text" class="textbox" /></li> 
 
</ul> 
 
<div class="center py2 ml4"> 
 
    <div class="js-add-textbox-button button blue bg-white" >add textbox</div> 
 
    <div class="show_html_button blue bg-white">show html</div>      
 
</div>

來源

2017-07-04 10:55:59

HTML輸入沒有更新值

回答

相關問題