如何在单击按钮时保留先前的文本框值

Question

Hello Friends I am facing some problem or can say not figure out any help regard this so please help me There is button having name Add Text when I click that button it display a text box when i enter some text in this text box it display the entered text below.when I click again Add Text button then previous one textbox seems empty i don't want this.

1.) My requirement is when I click Add Text button second time it doesn't empty the previous textbox.

2.) when i click the B button then it convert the text to bold.Right now its working for one text i want when i select particular text and click B button it convert the particular selected text to bold. These are my two problem.Please reply if anybody having the solution of my problem. Thanks

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

Thanks

Answer 1

This will solve you first 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++;
                 }

        }

for second check out this link may help you http://www.java2s.com/Code/JavaScript/HTML/CapturingaTextSelection.htm

Answer 2

1.) My requirement is when I click Add Text button second time it doesn't empty the previous textbox.

This happens because you replace the innerHTML . Any text you have typed into the input field will not be retained, because it's not part of the new innerHTML .

To prevent this from happening, you can manipulate the DOM instead. It may be a bit more code and theoretically somewhat slower, but in this case that's not something you need to worry about.

2.) when i click the B button then it convert the text to bold.Right now its working for one text i want when i select particular text and click B button it convert the particular selected text to bold.

This one is a little trickier. We need to remember which input field was last selected, so that f2() can set the fontWeight of the correct element. You can do that by using the onblur event of the input elements and having a variable lastFocused remembering which one was last selected.

All in all, something like this should work (try here: 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 3

Your problem is a consequence of resetting the innerHTML every time, which has the side effect of resetting the contents of the text boxes. You probably did not intend to delete and recreate all the text boxes when just one is added. Instead, use DOM methods to manually build nodes and insert them:

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 libraries can make this easier. In fact, jQuery can render your exact innerHTML generation attempt functional using only $('#div').append('your html code here') . If you do not use jQuery, insertAdjacentHTML() might suffice.

As far as getting the selected text goes, take a look at the fieldSelection code. It's old and may not work with current versions of jQuery, but that's roughly it. If you are also planning on implementing italic text, underlining, etc. , you may want to consider a contentEditable div as used by the major in-browser rich text editing scripts such as CKEditor (although that particular one uses an iframe).