在TextAreaField中使用jQuery和Flask-WTF进行实时字数统计的方法如下:
<form>
{{ form.text_area(id='myTextArea') }}
</form>
<script>
$(document).ready(function() {
$('#myTextArea').on('input', function() {
var text = $(this).val();
var count = text.length;
$('#charCount').text(count);
});
});
</script>
<p>字符数: <span id="charCount">0</span></p>
from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import TextAreaField
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key'
class MyForm(FlaskForm):
text_area = TextAreaField('Text')
@app.route('/', methods=['GET', 'POST'])
def index():
form = MyForm()
if form.validate_on_submit():
# 处理表单提交逻辑
pass
return render_template('index.html', form=form)
if __name__ == '__main__':
app.run()
以上就是在TextAreaField中使用jQuery和Flask-WTF进行实时字数统计的步骤。通过使用jQuery监听TextAreaField的输入事件,并在每次输入时更新字符数的显示,可以实现实时字数统计的功能。
领取专属 10元无门槛券
手把手带您无忧上云