javascript - 将文本正确放入文本区域的 Javascript 问题

Question

感谢Thomas W举了一个很好的例子，很好地编辑了这个看起来更好的东西。我只是稍微改变了它，但现在似乎完美无缺。托马斯现在已经学会并理解了一种新的方式来做某事，我不会再以另一种方式去做。:) 也会很快更改 clearbox(form) 中的代码。

谢谢

<HTML>
<HEAD> 
<SCRIPT LANGUAGE="JavaScript">
window.onload = function(){
        windows1.style.fontWeight = "bold";
        windows1.style.fontSize = "12pt";
        changetabs(1)
        }
var split_text;
var urls_1;
var numbercount=0;
var totals;
var check_time;
var wait = 0;
var itemCounter = 0;
var tabs=1;
var tabspicked=1;

    function addto_boxes(form) {
        split_text = document.getElementById("text_to_split").value;
        urls_1 = split_text.split(" ", 100000);
        totals = urls_1.length-1;
        var boxNum = 1;
        var x=0;
        while (x <= totals -1 ) {
            var box = document.getElementById( "input_box"+boxNum);
            box.value = box.value + urls_1[x] + " ";
            boxNum += 1;
            if (boxNum > tabspicked) boxNum = 1;
            x++;
            clearbox(this.form) 
        }
    }


    function clearbox(form) {
    document.getElementById("text_to_split").value = "";
    var input_box = document.getElementById("input_box1").value;
    var input_box_2 = document.getElementById("input_box2").value;
    var input_box_3 = document.getElementById("input_box3").value;
    var input_box_4 = document.getElementById("input_box4").value;
    var input_box_5 = document.getElementById("input_box5").value;
    var input_box_6 = document.getElementById("input_box6").value;
    var input_box_7 = document.getElementById("input_box7").value;
    var input_box_8 = document.getElementById("input_box8").value;
    var input_box_9 = document.getElementById("input_box9").value;
    var input_box_10 = document.getElementById("input_box10").value;
    urls = input_box.split(" ", 100000);
    urls2 = input_box_2.split(" ", 100000);
    urls3 = input_box_3.split(" ", 100000);
    urls4 = input_box_4.split(" ", 100000);
    urls5 = input_box_5.split(" ", 100000);
    urls6 = input_box_6.split(" ", 100000);
    urls7 = input_box_7.split(" ", 100000);
    urls8 = input_box_8.split(" ", 100000);
    urls9 = input_box_9.split(" ", 100000);
    urls10 = input_box_10.split(" ", 100000);
    document.getElementById("box1").innerHTML = urls.length-1;
    document.getElementById("box2").innerHTML = urls2.length-1;
    document.getElementById("box3").innerHTML = urls3.length-1;
    document.getElementById("box4").innerHTML = urls4.length-1;
    document.getElementById("box5").innerHTML = urls5.length-1;
    document.getElementById("box6").innerHTML = urls6.length-1;
    document.getElementById("box7").innerHTML = urls7.length-1;
    document.getElementById("box8").innerHTML = urls8.length-1;
    document.getElementById("box9").innerHTML = urls9.length-1;
    document.getElementById("box10").innerHTML = urls10.length-1;
    document.getElementById("displaytotal").innerHTML = urls.length-1 + urls2.length-1 + urls3.length-1 + urls4.length-1 + urls5.length-1 + urls6.length-1 + urls7.length-1 + urls8.length-1 + urls9.length-1 + urls10.length-1;
    }

    function bold_selected_tab(tab_to_bold) {
        document.getElementById("windows1").style.fontSize = "10pt";
        document.getElementById("windows2").style.fontSize = "10pt";
        document.getElementById("windows3").style.fontSize = "10pt";
        document.getElementById("windows4").style.fontSize = "10pt";
        document.getElementById("windows5").style.fontSize = "10pt";
        document.getElementById("windows6").style.fontSize = "10pt";
        document.getElementById("windows7").style.fontSize = "10pt";
        document.getElementById("windows8").style.fontSize = "10pt";
        document.getElementById("windows9").style.fontSize = "10pt";
        document.getElementById("windows10").style.fontSize = "10pt";

        document.getElementById("windows1").style.fontWeight = "normal";
        document.getElementById("windows2").style.fontWeight = "normal";
        document.getElementById("windows3").style.fontWeight = "normal";
        document.getElementById("windows4").style.fontWeight = "normal";
        document.getElementById("windows5").style.fontWeight = "normal";
        document.getElementById("windows6").style.fontWeight = "normal";
        document.getElementById("windows7").style.fontWeight = "normal";
        document.getElementById("windows8").style.fontWeight = "normal";
        document.getElementById("windows9").style.fontWeight = "normal";
        document.getElementById("windows10").style.fontWeight = "normal";
        tab_to_bold.style.fontWeight = "bold";
        tab_to_bold.style.fontSize = "12pt";
    }

    function changetabs(tabs) {
        document.getElementById("tabesselected").innerHTML = tabs;
        tabspicked = tabs;
    }


</SCRIPT>
</HEAD>
<BODY>
Select Number of tab to use. Tabs selected <b><span style="font-size:12pt" id="tabesselected"></span><br></b>
<input type="button" id="windows1" style="height: 24px; width: 72px" value="Tabs: 1" onclick="changetabs(1);bold_selected_tab(windows1);" />&#160;
<input type="button"id="windows2" style="height: 24px; width: 72px" value="Tabs: 2" onclick="changetabs(2);bold_selected_tab(windows2);" />&#160;
<input type="button"id="windows3" style="height: 24px; width: 72px" value="Tabs: 3" onclick="changetabs(3);bold_selected_tab(windows3);" />&#160;
<input type="button"id="windows4" style="height: 24px; width: 72px" value="Tabs: 4" onclick="changetabs(4);bold_selected_tab(windows4);" />&#160;
<input type="button"id="windows5" style="height: 24px; width: 72px" value="Tabs: 5" onclick="changetabs(5);bold_selected_tab(windows5);" />&#160;
<input type="button"id="windows6" style="height: 24px; width: 72px" value="Tabs: 6" onclick="changetabs(6);bold_selected_tab(windows6);" />&#160;
<input type="button"id="windows7" style="height: 24px; width: 72px" value="Tabs: 7" onclick="changetabs(7);bold_selected_tab(windows7);" />&#160;
<input type="button"id="windows8" style="height: 24px; width: 72px" value="Tabs: 8" onclick="changetabs(8);bold_selected_tab(windows8);" />&#160;
<input type="button"id="windows9" style="height: 24px; width: 72px" value="Tabs: 9" onclick="changetabs(9);bold_selected_tab(windows9);" />&#160;
<input type="button"id="windows10" style="height: 24px; width: 72px" value="Tabs 10" onclick="changetabs(10);bold_selected_tab(windows10);" /><br><br>
<input id="Split" type="button" value="Add to boxes" onclick="addto_boxes(this.form);"/>____<input id="clearbutton" type="button" value="Clear" onclick="clearbox(this.form);"/><Br><br>
Paste urls into this box and click add to boxes<br>
<textarea NAME="texttosplit" id="text_to_split" VALUE="" rows="4" cols="75"></textarea><br><br><br><br>


<FORM NAME="myform" ACTION="" METHOD="GET">
<textarea NAME="inputbox" id="input_box1" VALUE="" rows="2" cols="5"></textarea>
<textarea NAME="inputbox2" id="input_box2" VALUE="" rows="2" cols="5"></textarea>
<textarea NAME="inputbox3" id="input_box3" VALUE="" rows="2" cols="5"></textarea>
<textarea NAME="inputbox4" id="input_box4" VALUE="" rows="2" cols="5"></textarea>
<textarea NAME="inputbox5" id="input_box5" VALUE="" rows="2" cols="5"></textarea><br>
<textarea NAME="inputbox6" id="input_box6" VALUE="" rows="2" cols="5"></textarea>
<textarea NAME="inputbox7" id="input_box7" VALUE="" rows="2" cols="5"></textarea>
<textarea NAME="inputbox8" id="input_box8" VALUE="" rows="2" cols="5"></textarea>
<textarea NAME="inputbox9" id="input_box9" VALUE="" rows="2" cols="5"></textarea>
<textarea NAME="inputbox10" id="input_box10" VALUE="" rows="2" cols="5"></textarea><br>
<INPUT TYPE="reset">
</FORM>
</BODY>
</HTML>

还要感谢 Thomas，因为您的示例我还能够将函数 bold_selected_tab() 更改为。我想我已经掌握了窍门。现在，如果 clearbox(form) 函数如下所示。

    function bold_selected_tab(tab_to_bold) {
        var x=1;
        while (x <= 10 ) {
            var box = document.getElementById("windows"+x);
            box.style.fontSize = "10pt ";
            x++;
        }

        var x=1;
        while (x <= 10 ) {
            var box = document.getElementById("windows"+x);
            box.style.fontWeight = "normal";
            x++;
        }

        tab_to_bold.style.fontWeight = "bold";
        tab_to_bold.style.fontSize = "12pt";
    }

score 1 · Accepted Answer

当我说循环和数组时，我的意思是不要重复你的内部块 10 次。

var doneChecking = false;
for (var tab = 1; tab <= 10 && ! doneChecking; tab++) {
    if (tabspicked >= tab) {
        if (numbercount >= totals ){
            numbercount = 0;
            clearbox(this.form);
            doneChecking = true;
            break;
        }
        if (numbercount <= totals ){
            var elementId = "input_box"+tab;
            var urlIndex = numbercount + tab - 1;   // why?
            document.getElementById( elementId).value = document.getElementById( elementId).value + urls_1[ urlIndex] + " ";
        }
    }
}

你越早干净和正确地编码，你就会越早理解你真正想要做什么。您可以选择尝试和学习这些东西，也可以不选择。由你决定。

如果您尝试在 N 个文本框中分发以空格分隔的输入字符串，则可以执行以下操作。

var boxNum = 1;
var numBoxes = tabspicked;  // are these Boxes or Tabs? I'm calling them Boxes.
for (var url : urls_1) {
    // add to Current Box.
    var box = document.getElementById( "input_box"+boxNum);
    box.value = box.value + urls + " ";

    // advance Box, rotating around the N boxes.
    boxNum += 1;
    if (boxNum > numBoxes) boxNum = 1;
}

这应该是一种简单的方法。看看你是怎么做的。

javascript - 将文本正确放入文本区域的 Javascript 问题

1 回答 1

Related

Reference