Question

我有一个Spring MVC应用程序，我需要根据用户输入捕获可变数量的键值对。 HTML＆amp;用于呈现控件的JS部分代码如下：

<tr>
    <td><label>Attributes (Names & Value(s))</label></td>        
    <td><input id="Button1" type="button" value="Add" onclick="Button1_onclick()"/></td>
</tr>

<script language="javascript" type="text/javascript">

        var NumOfRow = 1;
        var attribs = {};

        function Button1_onclick() {
            NumOfRow++;
            // get the reference of the main Div
            var mainDiv = document.getElementById('MainDiv');
            // create new div that will work as a container
            var newDiv = document.createElement('div');
            newDiv.setAttribute('id', 'innerDiv' + NumOfRow);
            //create span to contain the text
            var newSpan = document.createElement('span');
            newSpan.innerHTML = "Attribute Type";
            // create new textbox for type entry
            var newTextBox = document.createElement('input');
            newTextBox.type = 'text';
            newTextBox.setAttribute('id', 'DimensionType' + NumOfRow);
            //create span to contain the text
            var newSpan2 = document.createElement('span');
            newSpan2.innerHTML = "Attribute Value(s)";
            // create new textbox for value entry
            var newTextBox2 = document.createElement('input');
            newTextBox2.type = 'text';
            newTextBox2.setAttribute('id', 'DimensionValue' + NumOfRow);
            // create remove button for each attribute
            var newButton = document.createElement('input');
            newButton.type = 'button';
            newButton.value = 'Remove';
            newButton.id = 'btn' + NumOfRow;
            // attach event for remove button click
            newButton.onclick = function RemoveEntry() {
                var mainDiv = document.getElementById('MainDiv');
                mainDiv.removeChild(this.parentNode);
                NumOfRow--;
            }
            // append the span, textbox and the button
            newDiv.appendChild(newSpan);
            newDiv.appendChild(newTextBox);
            newDiv.appendChild(newSpan2);
            newDiv.appendChild(newTextBox2);
            newDiv.appendChild(newButton);
            // finally append the new div to the main div
            mainDiv.appendChild(newDiv);

            }
        }
    </script>

我不确定在提交表单时如何将捕获的数据发送回我的控制器。请指教。此外，如果有更好的方法来捕获这些数据，那么这些建议也是最受欢迎的。

Answer 1

如何在文本字段中制作Capture键事件，您可以这样做：

<html>
<head>
<script language="JavaScript" type = "text/javascript">
<!--

document.onkeypress = DisplayMsg;

function DisplayMsg(key_event)
{
    if (document.all) //Checks for IE 4.0 or later
    {
      document.form1.text2.value = String.fromCharCode(event.keyCode);
    }
    else if (document.getElementById) //checks for Netscape 6 or later
    {
      document.form1.text2.value = String.fromCharCode(key_event.which);
    }
    else if (document.layers) //Checks for Netscape 4
    {
      document.form1.text2.value = String.fromCharCode(key_event.which);
    }
}
//-->
</script>
<title>Capture Key Pressed</title>
</head>
<body>
<form name="form1">
<b>Type value in field:&nbsp; See what you typed:</b><br>
<input type = "text" name = "text1" onKeyPress="DisplayMsg(event)" size="20">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type = "text" name = "text2" onKeyPress="DisplayMsg(event)" size="20">
</form>
</body>
</html>

HTML和JS：以HTML格式捕获键值对

1 个答案: