Question

我已经制作了一些javascript函数，我正在寻找将它们实现到我的webapplication中的最佳方法。

主要的三个功能是：

焦点（）

焦点完全符合您的想法，它将重点放在文本框上。这有一个检查内置，检查文本字段需要焦点。该函数看起来像这样：

function Focus(field) {
            if (Locatie.value == "" && Bonregel == ""){
                Locatie.focus();
            }
            else if (Locatie.value == "") {
                Locatie.focus
            }
            else if (Bonregel.value == "") {
                Bonregel.focus();
            }
        }

我认为我需要在页面加载后立即调用use。

发送（）

发送也会按预期执行，它会从表单发送（提交）数据。这些功能看起来像这样：

function Send(keycode, locatie, bonregel) {
            //Assign fields to variables
            Form_Keycode = document.getElementById("form_keycode");
            Form_Locatie = document.getElementById("form_locatie");
            Form_Bonregel = document.getElementById("form_bonregel");

            // Assign values to fields
            Form_Keycode.value = keycode;
            Form_Locatie.value = locatie;
            Form_Bonregel.value = bonregel;

            //submit data from myform 
            document.myform.submit();
        }

检查

这是需要包含的最后一个大功能，CHeck检查是否按下了键，然后使用Send（）发送信息。这看起来像这样：“

function Check() {
            // check alle data vooor verzenden
            // Keycode 13 -> ENTER
            // Keycode 125 -> Green key on device

            Locatie = document.getElementById("locatie").value;
            Bonregel = document.getElementById("bonregel").value;

            if (event.keyCode == 125) {
                Send(125, locatie, bonregel);
            }
            else if (event.keyCode == 13) {
                delay(Send(13,locatie,bonregel), "Send", 500);
            }
            else {
                Focus();
            }
        }

现在回答问题：

将这些功能实现到我的html中最有效的方法是什么？应该使用哪种方法？我的HTML看起来像这样，：

<legend>Test</legend><br />
            <form name="myform" action="/" method="post">
                <input type="hidden" id="form_locatie" name="locatie" />
                <input type="hidden" id="form_bonregel" name="bonregel" />
                <input type="hidden" id="form_keycode" name="keycode"/>
            </form>
            <table>
                <tr>
                    <td>Locatie:</td>
                    <td><input type="text" id="locatie" onkeyup="CheckLocation()" value="{locatie}" /></td>
                </tr>
                <tr>
                    <td>Bonregel:</td>
                    <td><input type="text" id="bonregel" onkeyup="keyup(event)" /></td>
                </tr>
                <tr>
                    <td>Bonlijst:</td>
                    <td><textarea id="bonregelbox" readonly></textarea></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="Velden Legen" id="reset" onclick="ClearFields()" /></td>
                </tr>
            </table>

Answer 1

我不会为需要javascript的函数使用不同的表单。我将使用表单元素包装表，在输入字段onchange="check(this)"上添加事件验证并保持简单。

<form name="myform" action="/" method="post" onsubmit='return validate();'>
        <table>
            <tr>
                <td>Locatie:</td>
                <td><input type="text" id="locatie" onchange="check(this)" value="{locatie}" /></td>
            </tr>
            <tr>
                <td>Bonregel:</td>
                <td><input type="text" id="bonregel" onchange="check(this)" /></td>
            </tr>
            <tr>
                <td>Bonlijst:</td>
                <td><textarea id="bonregelbox" readonly></textarea></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="Velden Legen" id="reset" onclick="ClearFields()" /></td><!-- i do not understand this! -->
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit" /></td>
            </tr>
        </table>
        </form>

Answer 2

这可以避免不必要的值和变量声明赋值

1）焦点（param1，param2）

function Focus(Locatie,Bonregel) {
            if (Locatie.value == "" && Bonregel.value  == ""){
                Locatie.focus();
            }
            else if (Locatie.value == "") {
                Locatie.focus
            }
            else if (Bonregel.value == "") {
                Bonregel.focus();
            }
        }

2）发送（param1，param2，param3）

function Send(keycode, locatie, bonregel) {
            //Assign value directly
            document.getElementById("form_keycode").value = keycode;
            document.getElementById("form_locatie").value=locatie;
            document.getElementById("form_bonregel").value=bonregel;
            //submit data from myform 
            document.myform.submit();
        }

3）检查（）

function Check() {
            // check alle data vooor verzenden
            // Keycode 13 -> ENTER
            // Keycode 125 -> Green key on device
            if (event.keyCode == 125) {
                Send(125, document.getElementById("locatie").value, document.getElementById("bonregel").value);
            }
            else if (event.keyCode == 13) {
                delay(Send(13,document.getElementById("locatie").value,document.getElementById("bonregel").value), "Send", 500);
            }
            else {
                Focus(document.getElementById("locatie"),document.getElementById("bonregel"));
            }
        }

我怎样才能有效地实现这些javascript函数

2 个答案: