Question

我正在为聊天客户端制作原型。在这个阶段，我只是学习如何将用户的输入附加到上面的文本区域。但是，无论我做什么，它似乎都不起作用。它实际上正常运行的唯一一次是在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>

Chat.js

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

Answer 1

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

$(document).ready(function () {
    $('#send').click(sendText);
});

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

Answer 2

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

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

http://jsfiddle.net/AztSB/

Answer 3

你不需要把它放在一个函数中。你可以把它留给Jquery：）

FIDDLE中的内容

Jquery的：

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

UPDATE

使用append（）用新文本更新textarea！

Answer 4

这似乎对我有用：

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

Answer 5

只是不要将它包装在你的函数sendText中：

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

如何将文本从输入框传输到文本区？

Chat.js

5 个答案: