3

我有一个用于编辑票证的表格，该表格需要“编辑原因”。我想做的是在任何输入字段或选择下拉列表更改时自动填写。我知道这可以通过 javascript 和 onChange 事件来完成，并让它修改（我相信）textarea 的 innerHTML。我擅长 PHP/MySQL，但 javascript 绝对是我的弱点。

我不知道并且一直没有成功搜索的是如何编码。作为我所拥有的示例，以下代码是：

<!-- Customers name -->
<input type='text' name='customer_name' onChange="updateReason('Updated Customer Name')" /><br><br>

<!-- Customer Email -->
<input type='text' name='customer_email' onChange="updateReason('Updated Customer Email')" />

如果这两个中的任何一个被更改，那么 textarea 的内容将被更新并以回车结束。

任何帮助（或什至推动正确的方向/指向指南的链接）都将受到赞赏。

4

4 回答 4

1

My implementation separates the business logic from the design. It also uses more advanced features of JavaScript (which are supported by practically every browser).

http://jsfiddle.net/xrZk2/1/

For the lazy, create a textarea like so:

<input type="text" name="customer_name" id="customer_name" /><br /><br />
<input type="text" name="customer_email" id="customer_email" /><br /><br />
<textarea name="customer_change_log" id="customer_change_log" readonly="readonly"></textarea>
​

And use the following JavaScript.

(function () {
    'use strict';

    var updateReason = function (reason) {
        document.getElementById('customer_change_log').innerHTML += reason + '\n';
    };

    document.getElementById('customer_name').onchange = function () {
        updateReason('Updated Customer Name');
    };
    document.getElementById('customer_email').onchange = function () {
        updateReason('Updated Customer Email');
    };
}());​

And a little CSS never hurt anyone.

#customer_change_log {
    height: 5em;
    resize: vertical;
    width: 15em;
}​
于 2012-07-25T03:34:01.280 回答
1

HTML：

<form name="frmTest" action="test.html">
    <textarea name="reason"></textarea>

    <!-- Customers name -->
    <input type='text' name='customer_name' onChange="updateReason('Updated Customer Name')" />

    <!-- Customer Email -->
    <input type='text' name='customer_email' onChange="updateReason('Updated Customer Email')" />
</form>

本机 HTML 实现：

function updateReason(text) {
  document.frmTest.reason.value += text + '\r\n';
}
于 2012-07-25T03:19:49.220 回答
0

需要更新的输入标签给它 id 或一个类，每个标签都有唯一的 id，所以最好给它这样的 id

<input type='text' id="id-name" />

您需要添加jQuery 文件并将 jQuery 文件附加到您的 html 页面。附件写在head标签中，如下图所示。

<head>
     <script src="jquery.min.js"></script>
</head>

在下面的输入标签 wen 值是更改函数 updateReason 被调用。脚本标签中的代码编写在同一个 html 文件中，如果您想将 JavaScript 或 jQuery 代码与 html 分开，您可以将其写入没有脚本标签的 .js 文件中，然后将该文件附加到您的 html 页面中。

<input type='text' name='customer_name' onChange="updateReason('Updated Customer Name')" />

<script>
function updateReason(text)
{
    // # is used for id and . is used for referring class in jQuery
    $('#id-name').val(text);
}
</script>
于 2012-07-25T03:23:21.040 回答
0

一种有点不同的方法：

HTML：

<p><label>Customer Name: <input type='text' name='customer_name'/></label></p>
<p><label>Customer Email: <input type='text' name='customer_email'/></label></p>
<p><label>Edit Reason: <textarea id="edit_reason" rows="6" cols="60"></textarea></label></p>​

JS：

(function() {
    var reasons = {
        'customer_name': 'Updated Customer Name',
        'customer_email': 'Updated Customer Email'
    };
    var inputs = document.getElementsByTagName("INPUT"), len, i, input;
    var editReason = document.getElementById("edit_reason"), reasonText;

    for (i = 0, len = inputs.length; i < len; i++) {
        input = inputs[i];
        input.onchange = (function(name) {
            return function() {
                reasonText = editReason.value || "";
                if (reasons[name]) {
                    if (reasonText.indexOf(reasons[name]) < 0) {
                        editReason.value = reasonText + '\n' +  reasons[name];
                        editReason.value = editReason.value.replace(/^\n+/, '');
                    }
                }
            };
        }(input.name));
    };
}());

你可以在这个 fiddle中看到它。最大的区别在于逻辑与标记的分离，使用这个：

    var reasons = {
        'customer_name': 'Updated Customer Name',
        'customer_email': 'Updated Customer Email'
    };
于 2012-07-25T03:53:10.363 回答