一 jQuery实现input文本框内灰色提示文本效果
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input test</title>
<script src="jquery.js" type="text/javascript"></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>
二 another
http://www.zhangjingwei.com/archives/input-check/
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');
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);
<input id="test" type="text" value="请输入字符" />
分享到：
相关推荐
标题和描述提到的"input文本框里面显示小图片"是一种常见的UI设计技巧，它涉及到HTML、CSS以及可能的JavaScript技术。下面将详细解释如何实现这一功能。 首先，`<input>`标签是HTML中用于创建表单元素的，通常用于...
在许多场景下，为了提高用户体验和明确输入要求，设计师和开发者会在`input`文本框内显示提示信息。这种提示信息通常是非强制性的，旨在指导用户如何填写或提醒他们应输入何种内容。当用户鼠标点击文本框时，这些...
本文实例讲述了jQuery简单实现input文本框内灰色提示文本效果的方法。分享给大家供大家参考，具体如下： $(function(){ $(.grayTips).each(function(){ //遍历每个文本框 var objTextBox=$(this); var oldText=$...
<title>JS 实现input文本框效果 <input type="text" id="searchInput" placeholder="请输入关键词"> <script src="script.js"></script> ``` 在这个例子中，我们有一个ID为`searchInput`的输入框，它的`...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是能创建出各种动态的input文本框动画特效。这款特效专注于提供简单而美观的网址链接和邮箱格式输入框的焦点效果，增强...
总的来说，这个"文本框提示插件"是利用JavaScript动态生成和管理提示列表，通过CSS美化视觉效果，并响应用户输入和键盘事件，提供便捷的文本输入辅助。在实际开发中，开发者可以根据需求自定义数据源、匹配规则和...
在用户未输入任何内容或失去焦点时，有时为了提高用户体验，我们会希望在文本框内显示一些提示性文字，这被称为“占位符”或“提示文本”。在AutoIt中，可以使用`GUICtrlCreateInput()`函数创建一个输入文本框，并...
<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"></...
`，这样就确保了文本在文本框内垂直居中。 其次，为了让默认提示文字显示为灰色，我们可以设置`color`属性。在示例代码中，`style="color:gray;"`使得初始显示的“请输入企业名称”文本颜色为灰色，这样用户可以...
@ #xxx 为需要提示的input的id">本插件是为输入用户名的提示信息而写的 功能虽然简单但对于做开发的人来说每次写这几行代码也实属繁琐 所以我就把这几行代码写成了jquery的插件以求以后用起来更加便捷 简单说明： ...
这可以是一个数组集合，包含字符串或其他对象，每个对象包含提示文本和其他相关信息。 2. **监听键盘事件**：使用`TextInput`组件的`keyUp`事件，当用户停止按键时触发提示逻辑。 3. **匹配输入**：比较用户输入的...
同时，提供清晰的提示文本或标签，让用户知道他们应该输入什么。对于多行文本框，可以考虑添加滚动条以便显示大量文本。 在实际项目中，文本框的应用场景非常广泛，如登录界面的用户名和密码输入、表单的填写、搜索...
标题提到的“Input文本框随着输入内容多少自动延伸的实现”就是关于这个功能的实现方法。下面将详细讲解其原理和代码实现。 首先，我们要了解HTML中的`<input>`标签，它是用来创建表单元素的，如文本输入框。在HTML...
在IT行业中，文本框（TextBox）是用户界面（UI）设计中的一个重要元素，它用于接收用户的文本输入。在很多应用程序中，为了引导用户输入或提供输入格式的指示，我们会使用提示文字（Placeholder）。这种提示文字通常...
标题中的“像百度一样 文本框输入文本后提示相关信息”是指实现一个搜索或者输入功能，当用户在文本框中输入文字时，系统能够实时显示与输入内容相关的建议或信息，这种技术通常被称为自动补全（Autocomplete）或者...
带有 placeholder 文本的搜索字段： <form action="demo_form.asp" method="get"> <input type="search" name="user_search" placeholder="Search W3School" /> <input type="submit" /> </...
对于“自动在文本框提示信息”，我们通常指的是当用户聚焦到文本输入框时，显示一段预设的提示文本，而当用户开始输入时，这个提示文本会自动消失或者改变。 实现这一功能，首先需要在HTML中设置一个文本输入框，并...
【Ajax文本框输入提示】是一种前端交互技术，用于在用户输入文本时实时提供相关的建议或提示信息。在网页设计中，这种功能可以显著提升用户体验，尤其是对于搜索框或需要输入特定信息的表单。这个例子是基于Java和...
在网页开发中，文本框（`<input ...4. 监听文本框的`input`事件，实时更新提示信息。 5. 当输入超过最大字数时，采取相应的处理措施。 通过这样的方式，你可以为用户提供友好的输入体验，确保他们了解并遵守字数限制。