html中textarea输入框提示文字必须添加默认内容的完美解决

完美解决textarea输入框提示文字,必须添加默认内容

有placeholder标签,可以添加提示文字 ,但是没有,一般来说我们是把提示内容写在外面,如下图:
这里写图片描述

当然,这样的布局并不是最想要的效果,
最想要的是文字显示在输入框内,点击输入框时隐藏,离开输入框时,如果输入框没有内容,又显示提示:

网上搜到的都是利用js通过获取或失去焦点来设置textarea的内容,这有个最大的问题就是:因为设置了默认内容,如果用户不点击输入框,直接提交,就把默认的提示内容提交到后台了。

本人想出来的解决方案是:将提示内容写在一个p中,通过css的position属性来控制,将p显示到中,点击时,隐藏到p,这样即使用户不点击输入框直接提交,也不会把默认的提示文字提交到后台,效果如下图:
这里写图片描述

立即学习“前端免费学习笔记(深入)”;

                    解决textarea输入框提示文字,必须添加默认内容                     body{font-size:12px;}             p,p{margin:0;padding:0}                          .textarea{                         width:350px;height:80px;position:absolute;background:none;z-index:9            }                         .note{                         position:absolute;line-height:20px;padding:3px 5px;                         }                

在这里写入你对服务商的额外要求,服务商等级,好评率等

以上就是html中textarea输入框提示文字必须添加默认内容的完美解决的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1544774.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 16:11:54
下一篇 2025年12月20日 11:54:57

相关推荐

  • 实例介绍六种html清除浮动的方式,供参考

    使用display:inline-block会出现的情况: 1.使块元素在一行显示2.使内嵌支持宽高3.换行被解析了4.不设置的时候宽度由内容撑开5.在IE6,7下步支持块标签由于inline-block属性换行的时候被解析(有间隙)故解决方法使用浮动float:left/right使用浮动时出现的…

    好文分享 2025年12月21日
    000
  • html中的链接如何默认打开方式标签元素的详解

    html 超链接(锚文本)默认打开方式与默认链接url地址标签元素 一、语法与结构 二、Html base超链接默认打开地址与打开方式标签使用说明    1、Target 值:    1、_blank 新窗口打开URL链接    2、_parent 在本网页刷新全新打开对应URL地址    3、_s…

    好文分享 2025年12月21日
    000
  • Html中关于字体大小单位px、em、 pt的具体分析

    网页上定义字体大小有常见三种单位,px、em、pt px px是pixel缩写,是基于像素的单位.在浏览网页过程中,屏幕上的文字、图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在800×600分辨率下,要占屏幕宽度的1/8,但在1024×768下,则只占约1/10。所以如果在定义字…

    好文分享 2025年12月21日
    000
  • html中标签的实例解析

    html 文本颜色 字体 大小标签元素 html 标签之html文字字体、html字体颜色、html字体大小设置标签元素 目录 font标签语法与结构 html Font标签说明 Font应用案例 立即学习“前端免费学习笔记(深入)”; font标签案例截图 font标签总结 一、font标签语法与…

    2025年12月21日
    000
  • html中关于iframe的allowTransparency属性的详解

    ie5.5开始支持浮动框架的内容透明。如果想要为浮动框架定义透明内容,则必须满足下列条件。1.与 iframe 元素一起使用的 allowtransparency 标签属性必须设置为 true。2.在 iframe 内容源文档,background-color 或 body 元素的 bgcolor …

    好文分享 2025年12月21日
    000
  • html iframe使用的实战总结分享

    说在前面的话,iframe是可以做很多事情的。例如:a>通过iframe实现跨域;b>使用iframe解决ie6下select遮挡不住的问题c>通过iframe解决ajax的前进后退问题d>通过iframe实现异步上传。(easyui中form组件就是用的iframe,实现表…

    2025年12月21日 好文分享
    000
  • html中iframe签的作用以及使用技巧详解

    纵观时下网站,本来网速就有些慢,可是几乎每页都要放什么banner,栏目图片,版权等一大堆雷同的东西,当然,出于网站风格统一、广告效应的需要,本无可厚非,可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了,有没有办法,让这些雷同的东西一次下载后就不用再下载,而只下载那些内容有变化区域的网页内…

    好文分享 2025年12月21日
    000
  • 关于html滚动条样式的使用以及示例代码分享

    html中滚动条属性设置scrollbar属性、样式详解1、 overflow内容溢出时的设置(设定被设定对象是否显示滚动条)    overflow-x水平方向内容溢出时的设置    overflow-y垂直方向内容溢出时的设置    以上三个属性设置的值为visible(默认值)、scroll、…

    好文分享 2025年12月21日
    000
  • html中关于div滚动条样式设计的实例

    html中关于div滚动条样式设计的实例 ::-webkit-scrollbar-track-piece{background-color:#fff;/*滚动条的背景颜色*/-webkit-border-radius:0;/*滚动条的圆角宽度*/}::-webkit-scrollbar{width:…

    好文分享 2025年12月21日
    000
  • html如何强制显示以及隐藏浏览器的滚动条

    刚在做个网站,有个页面与其他页面显示有点出入, 通过观察和调试,发现是该页面的垂直高度未溢出, 无法调用出垂直滚动条, 从而导致相对于其他页面居中时相差几个像素距离, 使得页面效果不够友好。 立即学习“前端免费学习笔记(深入)”; 解决方案:将所有页面强制添加或者隐藏浏览器的滚动条即可。 相关…

    好文分享 2025年12月21日
    000
  • html如何实现隐藏滚动条但可以滚动的示例代码

    代码:(原理就是遮盖) .scroll{ overflow-x: hidden; overflow-y: auto; } .scroll-son{ overflow-x: hidden; } 1立即学习“前端免费学习笔记(深入)”; Designify 拖入图片便可自动去除背景✨ 90 查看详情 1…

    2025年12月21日
    000
  • html中5种空格表示的具体分析

    HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器。其他几种空格(       ‌‍)在不同浏览器中宽度各异。               它叫不换行空格,全称No-Break Space,它是最常见和我们使用最多的空…

    好文分享 2025年12月21日
    000
  • javascript如何实现表单验证_有哪些最佳实践

    JavaScript表单验证核心是提交前快速反馈错误以提升体验,但不可替代后端校验;需结合原生API、解耦规则、无障碍支持及前后端协同。 JavaScript 表单验证的核心目标是:在用户提交前快速反馈错误,提升体验,同时不能替代后端校验。实现上应兼顾即时性、可访问性与健壮性,而非仅靠 onsubm…

    2025年12月21日
    000
  • javascript如何实现拖放功能_相关的事件有哪些

    关键拖放事件包括源元素的dragstart、drag、dragend和目标元素的dragenter、dragover、dragleave、drop;需设置draggable=”true”,在dragstart中setData,在dragover中preventDefault,…

    2025年12月21日 好文分享
    000
  • 如何用javascript实现懒加载_有哪些技术方案?

    懒加载核心是按需加载,推荐使用Intersection Observer API实现,辅以loading=”lazy”渐进增强;老项目兼容IE可降级为节流滚动监听;框架中宜封装为Hook或指令,避免关键内容懒加载。 懒加载(Lazy Loading)的核心是“按需加载”,即当…

    2025年12月21日
    000
  • javascript如何操作iframe_如何安全地进行跨域通信

    JavaScript操作iframe需分同源与跨域:同源时用contentWindow直接访问DOM或调用函数,须等load事件;跨域唯一安全方式是postMessage,需校验origin、约定消息结构并支持双向通信。 JavaScript 操作 iframe 的核心在于正确访问其内容,而跨域通信…

    2025年12月21日
    000
  • 如何使用javascript操作DOM_常见方法有哪些?

    JavaScript操作DOM的核心是通过内置API获取、修改、添加或删除页面元素;常用方法包括getElementById、querySelector、innerHTML、classList、createElement、addEventListener等,配合事件委托可高效实现动态交互。 Java…

    2025年12月21日
    000
  • 如何实现JavaScript验证表单_前端验证的最佳实践是什么

    JavaScript表单验证核心是提升体验与保障基础数据质量,但不可替代后端验证;需结合HTML5原生属性与JS增强交互,确保提示清晰可访问,并始终信任后端校验。 JavaScript 表单验证的核心目标是提升用户体验和保障基础数据质量,但它不能替代后端验证。前端验证应快速反馈、友好提示、不干扰正常…

    2025年12月21日
    000
  • javascript标签模板是什么_它如何解析模板字符串?

    标签模板是JavaScript中通过函数处理模板字符串的语法,首参为静态字符串数组,后续参数为插值表达式结果,常用于HTML转义、SQL参数化等场景。 JavaScript 标签模板(Tagged Templates)是一种函数调用语法,允许你用自定义逻辑处理模板字符串,而不是直接拼接成普通字符串。…

    2025年12月21日
    000
  • javascript CSP策略是什么_如何防止跨站脚本攻击?

    CSP是一种浏览器强制执行的白名单式安全策略,通过HTTP头或meta标签限制资源加载以防止XSS。需禁用内联脚本与eval、改用事件监听、显式声明第三方域名,并配合服务端转义等其他防护措施。 JavaScript CSP(Content Security Policy,内容安全策略)是一种浏览器安…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信