0

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

5 回答 5

3

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

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

function sendText(){
    var text = $('#textField').val();
    $('#textArea').val($('#textArea').val() + text);
    $('#textField').val('');
}
于 2013-07-26T20:25:52.830 回答
1

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

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

http://jsfiddle.net/AztSB/

于 2013-07-26T20:26:42.300 回答
0

这似乎对我有用：

<!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>
于 2013-07-26T20:32:46.090 回答
0

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

你的东西在一个FIDDLE中查看

查询：

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

更新

使用 append() 用新文本更新文本区域！

于 2013-07-26T20:27:59.977 回答
0

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

$(document).ready(function () {
    $('#send').click(function () {
        var text = $('#textField').val();
        $('#textArea').val($('#textArea').val() + text);
        $('#textField').val('');
    });
});
于 2013-07-26T21:19:08.877 回答