<!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 11:44:42 浏览: 70

以下是改进后的代码，对用户输入内容进行了长度限制和敏感词汇过滤，添加了更友好的提示方式，并且使用原生 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 实现了相同的功能，避免了使用第三方库对页面加载速度的影响。

阅读全文

相关推荐

-doctype-html-html-lang-en-dir-ltr-head-meta-name:

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

梦幻之森圣诞树：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>Error</title> </head> <body> Cannot POST / </body> </html>

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

<!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>表格标签的基本使用</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>我的web课程大作业</title> </head> <body> <script type="module" src="/src/main.js"></script> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页</title> <style type="text/css"> </style> </head> <body> 上 中 下 </body> <body> w </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>{%block title %} {% endblock%}</title> </head> <body> 我是父模版 {% block body%} {% block body%} </body> </html>

白色大气风格的旅游酒店企业网站模板.zip

python实现用户注册

最新推荐

白色大气风格的旅游酒店企业网站模板.zip

python实现用户注册

RStudio中集成Connections包以优化数据库连接管理

管理建模和仿真的文件

Keil uVision5全面精通指南

flink提交给yarn19个全量同步MYsqlCDC的作业，flink的配置参数怎样设置

PHP博客旅游的探索之旅

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

【单片机编程实战】：掌握流水灯与音乐盒同步控制的高级技巧

java 号码后四位用‘xxxx’脱敏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页</title> <style type="text/css"> </style> </head> <body> 上中下 </body> <body> w </body> </html>