Wie der vorherige Textfeld Wert auf Knopfdruck bleiben

Question

Hallo Freunde Ich stehe vor einem Problem oder kann sagen, keine Hilfe zu diesem Thema, also bitte helfen Sie mir Es gibt Button mit Namen Text hinzufügen, wenn ich diesen Knopf klicken zeige ein Textfeld an, wenn ich etwas Text in dieses Textfeld eintrage, es zeigt den eingegebenen Text unten an. Wenn ich noch einmal auf Text hinzufügen klicke, dann scheint das vorherige Textfeld leer zu sein, ich will das nicht.

1.) Meine Anforderung ist, wenn ich zum zweiten Mal auf die Schaltfläche Text hinzufügen klicke, wird das vorherige Textfeld nicht gelöscht.

2.) wenn ich auf die B-Taste klicke, dann wandle ich den Text in bold.Right jetzt funktioniert es für einen Text ich will, wenn ich bestimmten Text auswählen und klicken Sie auf B-Taste konvertieren Sie den bestimmten markierten Text zu fett. Das sind meine zwei Probleme. Bitte antworten Sie, wenn jemand die Lösung meines Problems hat. Dank

<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> 

Dank

Answer 1

1.) Meine Forderung ist Wenn ich zum zweiten Mal auf die Schaltfläche "Text hinzufügen" klicke, wirdnicht angezeigtleeren Sie die vorherige Textbox.

Dies passiert, weil Sie die innerHTML ersetzen. Jeder Text, den Sie in das Eingabefeld eingegeben haben, wird nicht beibehalten, da er nicht Teil der neuen innerHTML ist.

Um dies zu verhindern, können Sie stattdessen das DOM manipulieren. Es kann etwas mehr Code und theoretisch etwas langsamer sein, aber in diesem Fall müssen Sie sich keine Sorgen machen.

2.) wenn ich die Taste B klicken dann den Text konvertieren bold.Right jetzt seine für einen Text arbeiten ich will, wenn ich bestimmte Text auswählen und klicken B Taste wandelt es die besondere ausgewählt Text zu fett.

Dieser ist ein wenig komplizierter. Wir müssen uns daran erinnern, welches Eingabefeld zuletzt ausgewählt wurde, so dass f2() den fontWeight des richtigen Elements einstellen kann. Sie können dies tun, indem Sie das onblur Ereignis der Eingabeelemente verwenden und sich eine Variable merken, die zuletzt ausgewählt wurde.

Alles in allem, so etwas wie dies funktionieren sollte (versuchen Sie hier: 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

Dies werden Sie löst erstes Problem

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++; 
       } 

     } 

für die zweiten Link überprüfen können Sie helfen, http://www.java2s.com/Code/JavaScript/HTML/CapturingaTextSelection.htm

Answer 3

Ihr Problem ist eine Folge der innerHTML- Zurücksetzen jedes Mal, was den Nebeneffekt, das Zurücksetzen der Inhalte der hat Textfelder. Sie haben wahrscheinlich nicht beabsichtigt, alle die Textfelder zu löschen und neu zu erstellen, wenn nur eine hinzugefügt wird.Verwenden Sie stattdessen DOM-Methoden, um Knoten manuell zu erstellen und einzufügen:

JavaScript-Bibliotheken können dies einfacher machen. In der Tat kann jQuery Ihren exakten innerHTML-Generierungsversuch nur mit $('#div').append('your html code here') ausführen. Wenn Sie jQuery nicht verwenden, reicht möglicherweise insertAdjacentHTML() aus.

Wenn Sie den ausgewählten Text erhalten, sehen Sie sich den Code fieldSelection an. Es ist alt und möglicherweise nicht mit aktuellen Versionen von jQuery, aber das ist es ungefähr. Wenn Sie auch kursiven Text, Unterstreichung, etc. implementieren möchten, sollten Sie eine contentEditable div wie von den großen in-Browser-Rich-Text-Bearbeitungsskripts wie CKEditor (obwohl diese verwendet einen iframe) verwenden.