我正在使用jQuery进行简单的聊天 . 形式问题是什么?其中包含“text”类型的输入和一个按钮 . 在我的JS代码中,如果文本字段为空,则禁用该按钮,并在其中包含某些文本时启用它 . 它的工作正常,因为我有以下代码:
home.html的:
{% load staticfiles %}
<html>
<head>
<title>Public chat</title>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Here are the previous messeeges showed, it doesn't matter now-->
<form id="chat-form" method="post" action="/post/">
<div id="chat-bottom" class="input-group">
<input type="text" id="chat-msg" name="chat-msg" class="form-control"/>
<span class="input-group-btn">
<input class="btn btn-default" id="send" type="submit" value="Send"/>
</span>
</div>
</form>
</body>
<script src="{% static 'chat.js' %}"></script>
</html>
chat.js:
$('#chat-form').on('submit', function(event){
event.preventDefault();
$.ajax({
url : '/post/',
type : 'POST',
data : { msgbox : $('#chat-msg').val() },
success : function(json){
$('#chat-msg').val('');
$('#msg-list').append('<li class="text-right list-group-item">' + json.msg + '</li>');
var chatlist = document.getElementById('msg-list-div');
chatlist.scrollTop = chatlist.scrollHeight;
}
});
});
function getMessages(){
if (!scrolling) {
$.get('/messages/', function(messages){
$('#msg-list').html(messages);
var chatlist = document.getElementById('msg-list-div');
chatlist.scrollTop = chatlist.scrollHeight;
});
}
scrolling = false;
}
var scrolling = false;
$(function(){
$('#msg-list-div').on('scroll', function(){
scrolling = true;
});
refreshTimer = setInterval(getMessages, 500);
});
$(document).ready(function() {//here checking if the text field is empty
$('#send').attr('disabled','disabled');
$('#chat-msg').keyup(function() {
if($(this).val() != '') {
$('#send').removeAttr('disabled');
}
else {
$('#send').attr('disabled','disabled');
}
});
});
当我尝试将TinyMCE添加到文本字段时
<script type="text/javascript" src="{% static 'tiny_mce/tiny_mce.js' %}"></script>
<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
selector : "#chat-msg"
});
</script>
始终禁用"Send"按钮 . 我试着这样做Get value of tinymce textarea with jquery selector所以函数看起来像这样:
$('#chat-form').on('submit', function(event){
event.preventDefault();
tinyMCE.triggerSave();
$.ajax({
//here the same code as above in the same function
});
});
还有这个:
$(document).ready(function() {
$('#send').attr('disabled','disabled');
$('#chat-msg').keyup(function() {
tinyMCE.triggerSave();
if($(this).val() != '') {
$('#send').removeAttr('disabled');
}
else {
$('#send').attr('disabled','disabled');
}
});
});
但是,雷索仍然是一样的 . 起初我不想使用getContent()(因为它在很多类似的问题中都有说),因为在文档(http://archive.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent)中它被称为清理内容 . 最后我甚至试过没有效果 .
我是jQuery和TinyMCE的新手,所以我相信我错过了一些明显的东西 . 如何在这里更改chat.js以检索文本字段的内容?
2 回答
在我的例子中,tinyMCE.triggerSave();没有工作,所以我在onChange事件上手动设置内容 . 你可以这样做 .
注意:var content = tinyMCE.activeEditor.getContent() . trim(); var tinyMceElement = tinyMCE.get(editor.editorId).getElement();
这是在旧版本中获取文本内容和dom元素的方法 . 它可能在新版本中有所不同 .
我要改变的第一件事就是你的
keyup
功能 . 当TinyMCE注入页面时,原始表单元素(在您的情况下为<input>
)不再可见 . 如果您使用浏览器工具,您将看到TinyMCE注入了一系列<div>
和<iframe>
,有效地隐藏了您的<input>
. 执行此操作后,document.ready
中的代码将不会触发:相反,您可以在TinyMCE的init函数中添加
keyup
或change
函数: