`
txf2004
  • 浏览: 7065635 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

在textarea里,加提示效果.

阅读更多

<iframe name="google_ads_frame" marginwidth="0" marginheight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-4490194096475053&amp;dt=1228531115328&amp;lmt=1228528446&amp;prev_slotnames=1891601125&amp;output=html&amp;slotname=3685991503&amp;correlator=1228531115296&amp;url=http%3A%2F%2Fwww.corange.cn%2Farchives%2F2008%2F10%2F1814.html&amp;ea=0&amp;ref=http%3A%2F%2Fwww.corange.cn%2Fhtml%2Fcorange__98.html&amp;frm=0&amp;ga_vid=1689705203.1228531115&amp;ga_sid=1228531115&amp;ga_hid=106946996&amp;flash=9.0.124.0&amp;u_h=768&amp;u_w=1024&amp;u_ah=738&amp;u_aw=1024&amp;u_cd=32&amp;u_tz=480&amp;u_java=true&amp;dtd=15" frameborder="0" width="300" scrolling="no" height="250" allowtransparency></iframe>

,初始状态:
当鼠标点进去写东西的时候,如下图:
默认用了一个bg图片,在文本框获得一次焦点后把背景图片去掉了,后来再失去焦点的时候用的是第三个样式。
代码是copy下来的,图片路径修改成了绝对路径。
/*你好,你现在看的CSS是偶写的,抄袭的时候记得改名字*//*linstyle.cn by 香水 06-07*//****** General Styles ******/
.fab{width:440px;height:100px;font-size:12px;padding:3px;background: #f8f9ff url(
http://www.linstyle.cn/website/template/linstyle/images/linstyle/footer.gif
) no-repeat 0 -222px;border: 1px solid #c4c9fd;color:#6C63A3}
.fabt{width:440px;height:100px;font-size:12px;padding:3px;border:1px solid #f7ca06;background:#fffbca;color:#cb6a24}
.fabtt{width:440px;height:100px;font-size:12px;padding:3px;background: #f8f9ff;border: 1px solid #c4c9fd;color:#6C63A3}
另外 以前发布过 textarea 里 加背景图:
效果如下:

http://www.corange.cn//uploadfiles/5f75db139f57fb24dd5401b4_80861.jpg
http://www.corange.cn//uploadfiles/7a17ed1fddfcd701314e15fc_16594.jpg
http://www.corange.cn//uploadfiles/06c325fa2d063b829f5146ff_52555.jpg
分享到:
评论

相关推荐

    效果超酷的textarea的输入字数限提示.rar

    在"效果超酷的textarea的输入字数限提示"这个压缩包中,可能就包含了实现这些效果的代码示例和CSS样式。 这个功能在许多实际场景中都非常有用,比如论坛发帖、在线留言、博客写作等。它不仅能够帮助用户避免输入...

    表单美化之textarea文本域背景的美化.rar

    在网页设计中,表单是用户与网站交互的重要部分,其中textarea元素用于收集用户输入的多行文本。本文档“表单美化之textarea文本域背景的美化.rar”着重于提升textarea的视觉效果,以增强用户体验。我们将探讨如何...

    效果超酷的textarea的输入字数限提示

    为了提供更好的用户体验,尤其是当需要限制用户输入的字数时,一个效果超酷的`textarea`字数限制提示可以极大地提升界面的交互性和专业性。本文将深入探讨如何通过CSS美化`textarea`,并实现动态的字数限制功能。 ...

    js监听鼠标事件控制textarea输入字符串的个数.docx

    这些事件可以用于实现各种交互效果,如悬浮提示、鼠标悬停高亮等。 例如,要监听`textarea`的鼠标移动事件,可以添加`onmousemove`事件: ```javascript &lt;textarea ... onmousemove="handleMouseMove(event)"&gt;&lt;/...

    jquery高亮插件(支持textarea内容高亮)

    **jQuery高亮插件——实现文本高亮与关键词查找** ...在网页开发中,有时我们需要对页面上的特定文本或者关键词进行高亮显示,以突出其重要性或...在全文检索应用中,结合关键词高亮,能更直观地展示结果,增强交互效果。

    textarea焦点的用法实现获取焦点清空失去焦点提示效果

    本文将详细讲解如何利用 `textarea` 的焦点事件实现特定的功能,包括获取焦点、清空内容、失去焦点时的提示效果。 首先,`textarea` 的焦点事件通常涉及到 `onfocus` 和 `onblur` 两个JavaScript事件处理器。`...

    jQuery textarea文本框输入文字字数限制提示代码

    本示例中,我们将探讨如何使用jQuery实现textarea文本框的字数限制功能,并实时提示用户输入的字符数量。 首先,让我们了解jQuery的基本概念。jQuery通过一个"$"符号作为入口,提供了一种简洁的方式来选择DOM元素、...

    控制textarea文本长度,并限制输入字数(带统计显示)

    JavaScript是一种广泛使用的客户端脚本语言,可以在用户与网页交互时执行,提供动态效果和验证。以下是一个简单的示例,展示了如何限制`textarea`的最大输入字数: ```html &lt;!DOCTYPE html&gt; 限制textarea输入...

    使用HTML开发商业网站-表单控件-textarea课件.pptx

    这将在`textarea`中显示一个淡色的提示文字,当用户开始输入时会自动消失。 总结,`&lt;textarea&gt;` 控件是HTML表单中用于收集多行文本的重要元素,通过合理设置`cols`、`rows`属性以及应用CSS和JavaScript,我们可以...

    VUE-消息提示框.docx

    在我们的场景中,我们需要使用可输入的消息提示框,要求使用 textarea 输入,并且附有长度校验。我们将使用 Vue 的组件来实现这个功能。 inputType 在我们的实现中,我们使用了 inputType 来定义输入框的类型。...

    jQuery插件charCount模仿twitter和新浪微博的textarea字数统计.zip

    而charCount这个插件则是基于jQuery的一个实用工具,它实时监测textarea中的字符数,帮助开发者实现动态显示剩余字符数的效果,提升用户的输入体验。 要使用charCount插件,首先需要在页面中引入jQuery库和...

    仿HTML5 placeholder 效果.rar

    HTML5的`placeholder`属性是Web开发中一个非常实用的功能,它允许我们在输入框`&lt;input&gt;`或文本区域`&lt;textarea&gt;`中设置提示文本,这些文本会在用户未输入任何内容时显示,一但用户开始输入,提示文本就会自动消失。在...

    asp.net后台实现文本框提示文字

    本篇文章将深入探讨如何在ASP.NET后台实现文本框的提示文字效果,以及在用户交互时动态改变其颜色和行为。 首先,我们需要了解ASP.NET中的TextBox控件。TextBox是ASP.NET Web Forms中最基本的输入控件,用于接收...

    javascript之textarea打字机效果提示代码推荐

    根据标题“javascript之textarea打字机效果提示代码推荐”以及描述“非常不错的提示输入内容,动态的提示,给人亲切感”,我们可以得出以下需求: 1. **动态提示**:当用户聚焦在文本框时,能够自动显示提示信息。 2...

    vue + el-input 中 textarea 实现 placeholder 换行

    在这个场景下,我们可能会遇到一个需求:如何在`el-input`的`textarea`部分实现placeholder的换行,以提供更清晰的提示信息。 首先,让我们理解`placeholder`属性。在HTML中,`placeholder`属性用于设置输入框或...

    jQuery表单消息提示功能.zip

    在JavaScript的世界里,jQuery库以其简洁的API和强大的功能深受开发者喜爱。本示例"jQuery表单消息提示功能"着重于提升用户交互体验,通过利用jQuery的事件处理和DOM操作来实现表单验证和提示信息的动态显示。下面将...

    页面右下脚提示效果(利用JQuery)

    标题 "页面右下脚提示效果(利用JQuery)" 指涉的是一个使用JQuery库实现的网页交互功能,具体是当用户输入标题和内容后,点击按钮,会在页面的右下角显示一个可操作的提示区域。这个提示区域具备最小化、最大化和关闭...

    微博@符号的用户名提示效果。(想@到谁?)

    这些功能对于实现 `@` 提示效果至关重要。要查看完整的实现效果,可以通过下载演示文件并进行本地测试。 总的来说,`@符号` 的用户名提示功能是提升社交媒体用户体验的关键特性,通过JavaScript和DOM操作,我们可以...

Global site tag (gtag.js) - Google Analytics