一、jQuery实现input文本框内灰色提示文本效果
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input test</title>
<script type="text/javascript"
src="./js/jquery.js"></script>
<script type="text/javascript">
function inputTipText(){
$("input[class*=grayTips]") //所有样式名中含有grayTips的input
.each(function(){
var oldVal=$(this).val(); //默认的提示性文本
$(this)
.css({"color":"#888"}) //灰色
.focus(function(){
if($(this).val()!=oldVal){$(this).css({"color":"#000"})}else{$(this).val("").css({"color":"#888"})}
})
.blur(function(){
if($(this).val()==""){$(this).val(oldVal).css({"color":"#888"})}
})
.keydown(function(){$(this).css({"color":"#000"})})
})
}
$(function(){
inputTipText(); //直接调用就OK了
})
</script>
</head>
<body>
<input type="text" value="输入您的用户名" class="grayTips" />
<input type="text" value="输入您的登录密码" class="aaagrayTips"/>
</body>
</html>
二、input标签获取焦点是文本框内提示信息清空
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="javascript" type="text/javascript">
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
function checkText(){
var textId = document.getElementById('test');
//设置文本框中的字体颜色为灰色
document.getElementById('test').style.color='#C0C0C0';
var textDefault = '中文';
function cls(){
if (this.value == textDefault){
this.value = '';
}
}
function res(){
if (this.value == ''){
this.value = textDefault;
}
}
textId.onfocus = cls;
textId.onblur = res;
}
addLoadEvent (checkText);
</script>
<body>
<input type="text" id="test" value="中文" />
</body>
</html>
分享到：
相关推荐
在Web前端开发中，为input文本框添加灰色提示文本是一种常见且实用的交互设计方式，目的是为了给用户明确的指示输入框中的内容应该是什么，同时当输入框获得焦点时提示文本消失，这样可以提高用户界面的友好性和直观...
在这个主题中，我们将深入探讨如何使用 jQuery 来实现文本框中的自动提示信息功能。 首先，`jQuery` 是一个轻量级的 JavaScript 库，它简化了 JavaScript 的DOM操作、事件处理和动画效果。对于“自动在文本框提示...
<title>jQuery Input文本框创建标签代码 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <input type="text" id="tag-input" placeholder="请输入标签"> <ul id="tags-container"></...
当input失去焦点时 会判断输入值与默认值是否一致 如果一致（或空）则再次显示默认提示信息 若不一致（已输入信息）则input值为所输入值 3 此插件是jquery插件 调用方式为 $ "#xxx" autoTip ; 并可以指定...
2. **默认灰色文本**：默认灰色文本是指文本框内显示的非选中状态的颜色较淡的文字，用于提示用户该字段的用途。在用户开始输入时，这些灰色文本应自动消失。 3. **实现方法**：在jQuery中，我们可以使用`.val()`...
IE11 在Input框内添加一个“X”，用来点击清除用户输入的数据，个人觉挺好用的，但是其它浏览器不会出现， 特进行插件扩展，实现所有浏览器都能出现“X” 实现原理： 此插件通过查找所有Input框 type="text" 属性 ...
本示例“jquery文本框添加删除标签代码”是利用jQuery实现的一个功能，允许用户在文本框中输入文字后将其转化为可删除的标签。这种功能常见于许多网站，比如用户输入兴趣爱好或关键词时，会自动生成标签，方便管理和...
在这个特定的场景中，我们关注的是如何使用jQuery来实现一个功能：当文本框（input[type="text"]）获取焦点时，其预设的文字自动消失，而当失去焦点时，文字又能重新出现。这个功能常见于搜索框或表单输入，以引导...
在本教程中，我们将深入探讨如何利用jQuery来实现一个搜索输入框的功能，当用户在input框中输入关键词时，能自动筛选并显示与之匹配的相关信息。 首先，我们需要在HTML中设置一个input元素作为搜索框，并且定义一个...
这段代码的工作原理是，当文本框获取焦点（用户点击输入框）且内容为空时，我们将`placeholder`的文本填充到输入框内。然后，当文本框失去焦点（用户点击其他地方）或内容改变时，如果发现内容仍然是默认文本，我们...
本篇文章将深入探讨如何使用jQuery来实现一个自动提示的文本框功能，这种功能常见于搜索框或者输入框，可以为用户提供即时的建议或相关搜索词。 一、jQuery基础 在开始之前，确保你已经在项目中引入了jQuery库。你...
在本文中，我们将深入探讨如何使用jQuery来实现一个功能，即在用户在文本框中输入时自动提示邮箱的后缀。这个功能对于提高用户体验尤其有用，因为它可以帮助用户快速准确地输入有效的电子邮件地址。 首先，我们需要...
通过以上步骤，我们就实现了一个基于 jQuery 的文本框输入自动提示功能，它具有类似百度搜索的效果。当然，这只是一个基础版本，实际应用中可能需要考虑更多细节，比如错误处理、延迟加载、分页加载等。同时，随着...
EasyUI文本框失去焦点事件和获取文本框内容的实现 EasyUI文本框是一种常用的UI组件，它提供了许多实用的功能，如文本框失去焦点事件和获取文本框内容等。下面我们将详细介绍EasyUI文本框失去焦点事件和获取文本框...
本示例涉及的是利用jQuery实现一个功能丰富的输入框，用户可以在其中输入关键词并将其转化为标签，这样的功能常见于社交媒体、论坛或者博客的标签管理系统。下面我们将详细探讨这个过程中的关键技术点。 首先，我们...
在本文中，我们将深入探讨如何使用jQuery实现一个文本框输入文字自动筛选的功能，这在许多网页应用中都是一项实用的功能，比如搜索栏、过滤列表等。这个功能的主要目的是提高用户体验，让用户在输入关键字时能够实时...
本文介绍了一个使用jQuery实现的简单实例，即在网页中通过注册文本框获取焦点时清空提示，失去焦点时如果没有输入，则重新显示提示信息的功能。在用户注册过程中，这常常被用来提示用户输入必须的信息，如账号、密码...
本篇文章将详细讲解如何利用jQuery实现一个text文本框的autocomplete智能搜索提示框效果，这对于创建类似百度搜索框的用户体验至关重要。 首先，我们需要理解jQuery的核心概念。jQuery是一个轻量级的JavaScript库，...
本文将详细解析"jQuery文本框回车创建标签代码"这一主题，帮助开发者了解如何利用jQuery实现一个功能，即在input文本框中输入文字后，通过回车键创建标签，并能获取这些标签的值。 首先，我们需要理解基本的HTML...