如何将文本从输入框转移到文本区域

How Can I Transfer Text From Input Box to Text Area?

本文关键字：文本 转移 区域 输入      更新时间：2023-09-26

我正在制作一个聊天客户端的原型。在这个阶段，我只是在学习如何将用户的输入附加到上面的文本区域。然而，无论我做什么，它似乎都不起作用。它唯一一次真正正常工作是在jsfiddle中，但当我加载实际的HTML页面时，我无法使它正常工作。

值得一提的是，根据教程的建议，我已经尝试将JQuery代码的脚本标记放在正文的末尾，而不是放在头部。教程中说，允许所有元素在JQuery代码之前加载是至关重要的，所以必须这样。正如你在下面看到的，脚本标记目前在头部，但这也不起作用。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="Chat.js"></script>
<title>
    Chat Client Prototype
</title>
</head>
<body>
    <div ID="topBar">
    </div>
    <h2 ID="header">Chat Client</h2>
    <div ID="chatBox">
        <div ID="topBar2">
        </div>
        <div ID="header2">
            Chat Client
        </div>
        <textarea ID="textArea" name="textArea">
        </textarea>
            <form ID="in">
                <input ID="textField" type="text">
                <button ID="send" type="button" name="Send" value="send">Send</button>
            </form>
    </div>
</body>
</html>

聊天.js

function sendText(){
$(document).ready(function () {
    $('#send').click(function () {
        var text = $('#textField').val();
        $('#textArea').val($('#textArea').val() + text);
        $('#textField').val('');
    });
});
}

不要在sendText（）函数中包装文档就绪处理程序，而是使用它：

$(document).ready(function () {
    $('#send').click(sendText);
});
function sendText(){
    var text = $('#textField').val();
    $('#textArea').val($('#textArea').val() + text);
    $('#textField').val('');
}

好吧，如果您将按钮更改为提交类型并将事件绑定到表单提交：，它就会起作用

$('#in').submit(function () {
    var text = $('#textField').val();
    $('#textArea').val($('#textArea').val() + text);
    $('#textField').val('');
    return false;
});

http://jsfiddle.net/AztSB/

这似乎对我有用：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $('#send').click(function () {
        var text = $('#textField').val();
        $('#textArea').html($('#textArea').html() + text);
        $('#textField').val('');
    });
});
</script>
<title>
    Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
    <div ID="topBar2">
    </div>
    <div ID="header2">
        Chat Client
    </div>
    <textarea ID="textArea" name="textArea"></textarea>
        <form ID="in">
            <input ID="textField" type="text">
            <input ID="send" type="button" name="Send" value="send"/>
        </form>
</div>
</body>
</html>

只是不要将其包装在函数sendText:中

$(document).ready(function () {
    $('#send').click(function () {
        var text = $('#textField').val();
        $('#textArea').val($('#textArea').val() + text);
        $('#textField').val('');
    });
});

您不需要将其放入函数中。你可以把它留给Jquery：）

你的东西在FIDDLE中查看

Jquery：

$('#send').click(function () {
    var text = $('#textField').val();
    $('#textArea').append(text);
    $('#textField').val('');
});

更新

使用append（）用新文本更新文本区域！

相关文章：