如何保持按鈕上的上一個文本框的值點擊

Question

你好朋友 我面臨一些問題或者可以說沒有找到任何幫助，所以請幫助我 有按鈕有名字添加文本當我點擊那個按鈕時它當我在這個文本框中輸入一些文本時顯示一個文本框，它顯示下面輸入的文本。當我再次點擊添加文本按鈕，然後上一個文本框似乎是空的我不想這個。

1.）我的要求是當我點擊添加文本按鈕第二次它不會清空上一個文本框。

2）當我點擊B鍵然後將文本轉換爲bold.Right現在它工作一文，我想，當我選擇特定的文字，然後點擊B鍵它通過特定的所選文本轉換爲粗體。 這些是我的兩個問題。如果有人解決我的問題，請回復。 感謝

<script type="text/javascript"> 
    var i=0; 
    function add_input() 
     { 
      if(i!=6){ 
       var d=document.getElementById('div'); 

      d.innerHTML+="<input type='text' name='addtext"+i+"' id='addtext"+i+"'onkeyup='copy("+i+")'><br></br>"; 
       i++; 
       } 

     } 
    function copy(j){ 

      var mm = 'addtext'+j; 
      var divid = 'newcontent'+j; 
      var s1=document.getElementById(mm).value; 

      /*var s2=document.getElementById('newcontent'+j);*/ 
      var s2=document.getElementById('newcontent'+j); 

      s2.innerHTML=s1; 


      } 
      </script> 


     <script type="text/javascript"> 
      function f2() { 

       if(document.getElementById('newcontent0').style.fontWeight =='bold') 
        { 
         document.getElementById('newcontent0').style.fontWeight = 'normal'; 
        } 
        else if(document.getElementById('newcontent0').style.fontWeight =='normal') 
        { 
         document.getElementById('newcontent0').style.fontWeight = 'bold'; 
         } 
        else if(document.getElementById('newcontent0').style.fontWeight =='') 
        { 
         document.getElementById('newcontent0').style.fontWeight = 'bold'; 
         } 
       } 
      </script> 

    <input type="button" value="Add Text" onclick="add_input()" /> 
    <input type="button" value="B" onclick="f2()"/> 
    <div id="div"></div> 
    <div id="newcontent0" style="padding:0px;margin:0px;"></div> 
    <div id="newcontent1" style="padding:0px;margin:0px;"></div> 
    <div id="newcontent2" style="padding:0px;margin:0px;"></div> 
    <div id="newcontent3" style="padding:0px;margin:0px;"></div> 
    <div id="newcontent4" style="padding:0px;margin:0px;"></div> 

感謝

Answer 1

1）我的要求是當我第二次單擊添加文本按鈕時，它不會 清空上一個文本框。

發生這種情況是因爲您替換了innerHTML。您輸入到輸入字段的任何文本都不會被保留，因爲它不是新的innerHTML的一部分。

爲了防止發生這種情況，您可以改爲操縱DOM。它可能稍微多一些代碼，理論上稍微慢一些，但在這種情況下，這不是你需要擔心的。

2）當我點擊B鍵然後將文本轉換爲bold.Right現在它 一個文本工作，我想，當我 選擇特定的文字，然後點擊乙 按鈕將它轉換所選的特定 文字加粗。

這一個是有點棘手。我們需要記住最後選擇哪個輸入字段，以便f2()可以設置正確元素的fontWeight。您可以通過使用輸入元素的onblur事件並使變量lastFocused記住上次選擇哪個事件來實現。

總而言之，這樣的事情應該工作（試一下：http://jsfiddle.net/2euLZ/）：

var i = 0; 
var lastFocused = null; 

function add_input() 
{ 
    if(i != 6){ 
     var d=document.getElementById('div'); 
     var newId = i; 

     var newInput = document.createElement("input"); 
     newInput.type = "text"; 
     newInput.name = "addtext" + i; 
     newInput.id  = "addtext" + i; 
     newInput.onkeyup = function() { copy(newId); }; 
     newInput.onblur = function() { lastFocused = newId; }; 

     d.appendChild(newInput); 
     d.appendChild(document.createElement("br")); 
     i++; 
    } 
} 

function copy(j) 
{ 
     var s1 = document.getElementById('addtext'+j); 
     var s2 = document.getElementById('newcontent'+j); 
     s2.innerHTML = s1.value; 
} 

function f2() { 
    var target = document.getElementById("newcontent" + lastFocused); 

    var newFontWeight = "bold"; 
    if(target.style.fontWeight == "bold") 
     newFontWeight = "normal"; 

    target.style.fontWeight = newFontWeight; 
} 

Answer 2

這將解決你的第一個問題

function add_input() 
     { 
      if(i!=6){ 
       var d=document.getElementById('div'); 
      p = document.createElement("input"); 

      p.type="text"; 
      p.name="addtext"+i ; 
      p.id="addtext"+i ; 
      p.setAttribute('onkeyup','copy('+i+')');  
      br = document.createElement("<br>"); 
      d.appendChild(p); 
      d.appendChild(br); 
       i++; 
       } 

     } 

的第二看看這個鏈接可以幫助你 http://www.java2s.com/Code/JavaScript/HTML/CapturingaTextSelection.htm

Answer 3

你的問題是重置每次的innerHTML，它具有復位的內容的副作用的結果文本框。當您添加一個文本框時，您可能不打算刪除並重新創建全部。相反，使用DOM方法手動構建節點並插入它們：

var inp = document.createElement('input'); 
inp.name = 'addtext' + i; 
inp.id = 'addtext' + i; 
inp.onkeyup = function() { 
    copy(this.id.slice(7)); 
}; 
d.appendChild(inp); 
d.appendChild(document.createElement('br'); 

JavaScript庫可以使這更容易。事實上，jQuery可以僅使用$('#div').append('your html code here')來呈現您的確切的innerHTML生成嘗試功能。如果你不使用jQuery，insertAdjacentHTML()就足夠了。

至於選定的文本去，看看fieldSelection代碼。這是舊的，可​​能不適用於當前版本的jQuery，但大致就是這樣。如果您還計劃實施斜體文本，下劃線，等，您可能需要考慮主要瀏覽器內富文本編輯腳本（如CKEditor（儘管該特定的一個使用iframe））所使用的contentEditable div。