Question

我有一张表单，用于编辑需要“编辑原因”的票证。我想要做的是在任何输入字段或选择下拉列表更改时自动填写。我知道这可以用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的内容将被更新并以回车结束。

任何帮助（甚至推向正确的方向/链接指南）都表示赞赏。

Answer 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';
}

Answer 2

我的实现将业务逻辑与设计分开。它还使用了JavaScript的更高级功能（实际上每个浏览器都支持它）。

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

对于懒惰，创建一个像这样的textarea：

<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>

并使用以下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');
    };
}());

一点点CSS从不伤害任何人。

#customer_change_log {
    height: 5em;
    resize: vertical;
    width: 15em;
}

Answer 3

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

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

您需要添加jQuery file并将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>

Answer 4

一种不同的方法：

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));
    };
}());

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

    var reasons = {
        'customer_name': 'Updated Customer Name',
        'customer_email': 'Updated Customer Email'
    };

JavaScript＆gt; onChange输入＆amp;选择更新textarea

4 个答案: