<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博发布功能</title> <style> {margin:0; padding:0 } #weibo{ width: 600px; padding:10px; border: 1px solid #000; margin:100px auto 0; } #weibo textarea{ width: 455px; height: 165px; resize:none; vertical-align: bottom; } #weibo button{ width: 40px; height: 24px; vertical-align: bottom; } #weibo ul{ margin:20px 20px 20px 90px; } #weibo li{ line-height: 24px; list-style-type:none; border-bottom:1px dashed #ccc; word-break:break-all; /自动换行*/ } </style> </head> <body> <div id="weibo"> 微博内容： <textarea></textarea> <button>发布</button> <ul> <li></li> </ul> </div> <script src="../jquery-3.7.0.js"></script> <script> $('button').click(function(){ // 1.拿到输入的内容 var res=$('textarea').val(); if(res!=''){ // console.log(res); // 2.创建孤儿元素 var oLi=$('<li>'+res+'</li>'); //3.添加元素 $('ul').prepend(oLi); //4.清空文本域 $('textarea').val(''); }else{ alert('请输入内容'); } }); </script> </body> </html>改进之后的代码

时间: 2024-03-21 20:44:42 浏览: 26

以下是改进后的代码，对用户输入内容进行了长度限制和敏感词汇过滤，添加了更友好的提示方式，并且使用原生 JavaScript 实现了相同的功能。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博发布功能</title> <style> * { margin: 0; padding: 0; } #weibo { width: 600px; padding: 10px; border: 1px solid #000; margin: 100px auto 0; } #weibo textarea { width: 455px; height: 165px; resize: none; vertical-align: bottom; } #weibo button { width: 40px; height: 24px; vertical-align: bottom; } #weibo ul { margin: 20px 20px 20px 90px; } #weibo li { line-height: 24px; list-style-type: none; border-bottom: 1px dashed #ccc; word-break: break-all; } .error { color: red; font-size: 12px; margin-top: 5px; } </style> </head> <body> <div id="weibo"> 微博内容： <textarea id="content"></textarea> <button id="submit">发布</button> <ul id="weiboList"> <li></li> </ul> </div> <script> var content = document.getElementById('content'); var submit = document.getElementById('submit'); var weiboList = document.getElementById('weiboList'); submit.addEventListener('click', function () { var res = content.value.trim(); if (res === '') { showError('请输入内容'); return; } if (res.length > 140) { showError('内容长度不能超过140个字符'); return; } if (isSensitive(res)) { showError('内容包含敏感词汇'); return; } var oLi = document.createElement('li'); oLi.innerText = res; weiboList.prepend(oLi); content.value = ''; }); function showError(msg) { var error = document.createElement('div'); error.className = 'error'; error.innerText = msg; weibo.appendChild(error); setTimeout(function () { weibo.removeChild(error); }, 2000); } function isSensitive(content) { var sensitiveWords = ['敏感词汇1', '敏感词汇2', '敏感词汇3']; for (var i = 0; i < sensitiveWords.length; i++) { if (content.indexOf(sensitiveWords[i]) >= 0) { return true; } } return false; } </script> </body> </html> ``` 改进后的代码对用户输入的内容进行了长度限制和敏感词汇过滤，并且添加了更友好的提示方式。使用原生 JavaScript 实现了相同的功能，避免了使用第三方库对页面加载速度的影响。

相关推荐

HTML中的<meta>标签的使用详解

index.html

-doctype-html-html-lang-en-head-meta-charset-utf-8-title-GitHub-Privacy-Stat:GitHub隐私声明-GitHub Docs <title> <meta name =“ viewport” content =“ width = device-width，initial-scale = 1”> <link rel =“ alternate icon” type =“ imagepng” href =“ a

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Not found</title> </head> <body> Not found </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Error</title> </head> <body> Cannot POST / </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>王梦洁</title> </head> <body> </body> </html>为什么访问不到这个页面。报错404

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书首页</title> </head> <body> 图书信息表 title auth pushdate </body> </html>、

<!doctype+html> <html> <head> <meta+charset="utf-8"> <title>佳佳美食</title> <link+rel="stylesheet"+type

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签的基本使用</title> </head> <body> 1 2 3 8 2 23 </body> </html>合并单元格

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewData["Title"] - Furion</title> </head> <body> @RenderBody() </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>boot-01首页</title> </head> <body> 工程首页 BMI测试 BMI测试 </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{%block title %} {% endblock%}</title> </head> <body> 我是父模版 {% block body%} {% block body%} </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="/jquery-3.6.3.min.js"> $("#11").click(function (){ alert("haha"); }) </script> <button id="11">haha</button> </body> </html>该代码为什么不弹出警示框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>html快速入门</title> </head> <body> HTML图片 </body> </html>请问这段代码有何问题

最新推荐

Python学习笔记16 - 猜数字小游戏

机器人比赛内容的讲解，帮助简单了解一下机器人比赛的注意事项

BSC绩效考核指标汇总 (2).docx

管理建模和仿真的文件

【进阶】Flask中的会话与用户管理

卷积神经网络实现手势识别程序

BSC资料.pdf

"互动学习：行动中的多样性与论文攻读经历"

【进阶】Flask中的请求处理

transformer模型对话