Question

你好朋友我正面临一些问题，或者可以说没有找到任何帮助，所以请帮助我有一个名称添加文本的按钮当我点击该按钮它显示一个文本框时，我在这个文本框中输入一些文本它显示下面输入的文本。当我再次点击添加文本按钮然后前一个文本框似乎是空的我不想要这个。

1。）我的要求是当我第二次单击“添加文本”按钮时，它不会清空上一个文本框。

2。）当我点击B按钮然后它将文本转换为粗体。现在它正在为我想要的一个文本工作，当我选择特定文本并单击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

这将解决您的第一个问题

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 2

1。）我的要求是当我第二次单击“添加文本”按钮时没有清空上一个文本框。

这是因为您替换了innerHTML。您输入到输入字段中的任何文本都不会被保留，因为它不是新innerHTML的一部分。

为了防止这种情况发生，您可以改为操纵DOM。它可能是更多的代码，理论上有点慢，但在这种情况下，这不是你需要担心的事情。

2。）当我点击B按钮然后它将文本转换为粗体。现在它的为我想要的一个文本工作选择特定文本，然后单击B. 按钮它转换特定选中的文字为粗体。

这个有点棘手。我们需要记住上次选择哪个输入字段，以便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 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，但这大致就是这样。如果您还计划实现斜体文本，下划线，等，您可能需要考虑主要的浏览器内富文本编辑脚本contentEditable div使用的CKEditor。（尽管那个特定的人使用iframe）。

如何在按钮单击时保留上一个文本框值

3 个答案: