文本框动态提示

最新推荐文章于 2021-01-15 04:17:01 发布
最新推荐文章于 2021-01-15 04:17:01 发布
阅读量832 收藏
点赞数
分类专栏： JavaScript 文章标签： function html javascript blog border url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weoln/article/details/2654641
版权

 一个文本框动态提示的例子。在输入的时候实时检查输入正确性，并给出提示。把下面两张图片保存到页面所在文件夹下，将后面的代码保存为html文件即可看到运行效果。图片如下：

https://p-blog.csdn.net/images/p_blog_csdn_net/weoln/EntryImages/20080715/check_right.gif

https://p-blog.csdn.net/images/p_blog_csdn_net/weoln/EntryImages/20080715/error.gif

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>

 </head>
 <style>
 .error-msg-div{
 background:no-repeat 5px 50% url(error.gif) #FFFCE5  ;
 border:1px solid #FF9966;
 margin:3px 3px 0px;
 padding-left:5px;
 color:#F85D00;
 font-size:9pt;
 font-weight:bold;
 text-align:left;
 height:20px;
 line-height:20px;
 text-indent:2em;
 display:inline;
}

.success-msg-div{
 background:no-repeat 5px 50% url(check_right.gif) ;
 margin:3px 3px 0px;
 padding-left:5px;
 color:#328F27;
 font-size:9pt;
 font-weight:bold;
 text-align:left;
 height:20px;
 width:20px;
 line-height:20px;
 text-indent:2em;
 display:inline;
}

 </style>
<script language="JavaScript">
//弹出错误提示（控件id，[错误信息]）
function showInfo(preid,message){
  var fdo = document.getElementById(preid);
  var ido = document.getElementById(preid+"InfoDiv");
  if (typeof message == "undefined") {
  fdo.className = "InputPass";
  ido.className = "success-msg-div";

  ido.innerHTML =  "&nbsp;";
 } else {
  fdo.className = "InputWarn";
  ido.className = "error-msg-div";
  ido.innerHTML = message+"&nbsp;&nbsp;";

 }
}

function check(id,value){
   if(value.length<1){
     showInfo(id,"名称不能为空");
   }
   else{
     showInfo(id);
   }
 }
</script>
 <body>
  <input type="text" name="test" class="InputNormal" id="serialIndex"
        onChange="check(&apos;serialIndex&apos;,this.value);"
  onBlur="check(&apos;serialIndex&apos;,this.value);"
  onKeyUp="check(&apos;serialIndex&apos;,this.value);" >
 <div id="serialIndexInfoDiv" ></div>
 </body>
</html>

 

weoln
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
文本框提示插件
04-03
文本框输入内容，出现相关提示。js源码插件，可以通过上下切换，enter键确认
input提升用户输入信息 当用户点击时 页面消失
itinglight的博客
08-20 581
方案二 <input type="text" placeholder="请输入内容"> 方案一 <input type="text" value='请输入内容' onfocus="javascript:if(this.value=='请输入内容')this.value='';"> 1、js 方法添加的提示文字不同于 使用 placeholder 属性添加的效果 2、placeholder 属性添加的提示文字，只有输入内容时文字才会消失 3、js 方式添加的提示文字，当光标定位到.
HTML文本框提示语句
qq_36949892的博客
05-23 1万+
HTML有两种文本框提示 //value标签中的内容需要你手动删除 <input type="text" name="" id="" value="请输入你的内容" /> //placeHolder标签中的内容在你输入时会自动消失 <input type="text" name="" id="" placeholder="请输入你的内容" /> 在value标签中设置...
文本框的提示功能的使用
wangleishi1的专栏
02-23 2410
在Web页面上，有时我们要在文本输入框里给点提示信息，告诉用户在这个地方该输入什么内容，比如说“请输入评论内容...”等等之类的提示信息，当用户把光标单位在输入框的时候，不应该让用户去清除那些提示信息，我们可以写个脚本来帮我们做这件事情,请看下面的两个例子： 1、给文本框添加触发事件onfocus和onblur，调用函数处理。完整代码： function cls(){ //捕获触发
Ext，保存输入记录，并会提示输入
weixin_33951761的博客
10-27 148
　　Ext的ComboBox组件使用非常多，通过配置输入框可以被允许成为一个。并可以存储输入记录，记录提示的基础，然后进行再次进入，以提高的用户体验输入操作。 　　代码非常easy，基本操作，如以下： // 输入提示 Ext.create("Ext.form.ComboBox", { renderTo: "放置的组件ID", name: "input", labelWi...
文本框自动提示_办公小技巧：填写不盲目 Word输入加提示
weixin_39580727的博客
01-15 596
我们制作需要填写复杂内容的Word表格时，一般会在填写框或者文章的前面加上提示，但毕竟表格的空间有限，这种方式既不美观也可能无法说清楚要求。好在借助Word的“文本控件”，我们可以在填写框里面直接输入提示字符，而当用户实际填写后这些提示字符又会自动消失。打开需要填写的文档，定位到需要添加提示的位置比如单位名称后，点击“开发工具→纯文本内容控件”，按提示在指定的区域插入一个纯文本控件，将这个控件作为...
ASP.NET输入文本框自动提示功能
10-23
主要介绍了ASP.NET输入文本框自动提示功能的相关资料,当选择某条数据的时候，自动给文本框赋值，减少了人工的输入，需要的朋友可以参考下
JavaScript 文本框下拉提示(自动提示)
10-28
JavaScript 文本框下拉提示，类似百度和Google的输入框提示效果，这里为了演示时加载的速度比较快，选用了一些数据，输入“1”可更好的看到效果。
C#文本框输入提示功能
05-18
C#文本框输入提示功能。有完整的代码，可供参考，获得焦点后就会自动消失
文本框默认提示文字
12-06
文本框默认提示文字。例如：搜索框中，默认提示：请输入 标题 搜索 。。。之后点击文本框，文字消失。
文本框输入提示
11-06
一个非常好用的文本框输入提示的jQuery插件。 个人编写并经个多个项目的测试。已完善到1.5版本。 js文档中注释着已经过测试的例子，可做帮助使用。 希望我的程序能给大家带来便捷和帮助，谢谢！ 注：①本文本框提示数据可以从数据库里异步读取数据，并且输入或删除文本框中内容时只每次只查一遍库，解决其他类似文本提示框删除文本信息时删除次数越多查询数据库的次数越多的问题。②本文本框提示数据可以从其他下拉列表框中取数据解决反复链接数据库的问题。
input文本框里面显示提示信息
11-23
input文本框里面显示提示信息，鼠标点击文本框提示信息自动消失！
给文本框添加灰色提示文字
04-20
NULL 博文链接：https://13521308103.iteye.com/blog/1887611
前端标准化（PC）
安迪夫的博客
10-26 752
&lt;div class="warp container"&gt; &lt;form id="frm" name="frm" action=""&gt; &lt;input type="hidden" id="userid" name="userid" value="{$user.itemid}"&
简单的js文本框提示语
weixin_34319817的博客
09-12 1413
2019独角兽企业重金招聘Python工程师标准>>> ...
js 提示警告例子
tony的专栏
08-29 2357
上传两张警告图片至web工程的根路劲的image文件下： check_error.gif  check_right.gif  html代码： 姓  名 * <input name="userName" id="userName" type=
（三）ExtJs小例子之：带有输入框的提示框（prompt）
fubo1990的博客
03-14 3199
1.写ext代码之前，引入ext相关文件（由于所建文件不同，引入资源路径不经相同，但是红色字体部分必须一致） /resources/css/ext-all.css"/> adapter/ext/ext-base.js"> /ext-all.js"> 2.源码 extPrompt.html -->
利用js实现输入框动态提示信息
热门推荐
林老师带你学编程
07-20 2万+
为了提高和用户的交互性，现在的输入框往往都采用输入信息自动提示的功能，类似于百度输入框中的提示功能。 设计思路是：在输入框input的组件下面放置一个div，这个div主要是为了提示信息的展示功能，类似于下拉框那种形式。 步骤一：在网页加载的时候会首先把输入框中要查询的信息全部加载出来，并且放置在一个全局变量中。 步骤二：当用户在输入框中输入信息的时候会触发响应函数，函数的主要功能是获取用户
删除select列表中选中的多个值
weoln的专栏
06-23 1767
下面的代码实现删除select列表中同时删除选中的多个值。 New Document //删除选择项function deleteSelected(){ var s = document.getElementById("categoryList"); var length = s.length;
html文本框添加提示文字
最新发布
05-13
你可以使用 HTML5 中的 placeholder 属性来为文本框添加提示文字。例如： ...当用户开始在文本框中输入内容时，这个提示文字会自动消失。注意，placeholder 属性在旧版本的浏览器中可能不被支持。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值