精华内容
下载资源
问答
  • html文本框后面加提示信息
    千次阅读
    2014-12-02 15:37:15

    <input type="text" name="userName" class="login_input id" placeholder="用户名">

    更多相关内容
  • 您可以使用HTML中的属性设置占位符(浏览器支持)。该和可以用CSS改变(虽然浏览器的支持是有限的)。placeholderfont-stylecolorinput[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */color...

    您可以使用HTML中的属性设置占位符(浏览器支持)。该和可以用CSS改变(虽然浏览器的支持是有限的)。placeholderfont-stylecolor

    input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */

    color:gray;

    font-style:italic;

    }

    input[type=search]:-moz-placeholder { /* Firefox 18- */

    color:gray;

    font-style:italic;

    }

    input[type=search]::-moz-placeholder { /* Firefox 19+ */

    color:gray;

    font-style:italic;

    }

    input[type=search]:-ms-input-placeholder { /* IE (10+?) */

    color:gray;

    font-style:italic;

    }

    展开全文
  • 也可以用js做到 css样式 复制代码代码如下: <style type=”text/css”> .in_search { border:1 none; color:#999999; float:left; font-size:14px; height:18px; line-height:18px; margin:3px 2px; width:...
  • HTML input 文本框添加提示文字的方法

    万次阅读 多人点赞 2019-10-30 11:34:59
    周未休息,感觉没啥可写的,就水一篇文章吧,说一说前端 html 页面中 input 元素中在没有值的情况下,添加提示的文字,当要输入文字的时候,提示的文字消失。 关于 html input 输入框的提示文字,有两种方法可以实现...

    周未休息,感觉没啥可写的,就水一篇文章吧,说一说前端 html 页面中 input 元素中在没有值的情况下,添加提示的文字,当要输入文字的时候,提示的文字消失。
    关于 html input 输入框的提示文字,有两种方法可以实现,一种为 input 元素的 placeholder 属性,一种为 js 方法。

    input 元素的 placeholder 属性

    placeholder:属性提供可描述输入字段预期值的提示信息
    语法:

    <input placeholder="提示的文字">
    

    例:input 添加提示的文字
    代码:

    <input type="text" placeholder="这里是提示的文字">
    

    运行结果:
    在这里插入图片描述
    当input输入框,输出文字时,提示的文字信息会消失

    js 方法添加 input 元素提示文字

    示例代码:

    <input type="text"  onfocus="javascript:if(this.value=='请输入内容')this.value='';">
    

    运行结果:
    在这里插入图片描述
    注:
    1、js 方法添加的提示文字不同于 使用 placeholder 属性添加的效果
    2、placeholder 属性添加的提示文字,只有输入内容时文字才会消失
    3、js 方式添加的提示文字,当光标定位到 input 输入框中时,提示文字就会消失
    文章来源:https://www.feiniaomy.com/post/471.html

    展开全文
  • 第一种方法:基于HTML5 input标签的新特性 - placeholder 。另外,x-webkit-speech 属性可以实现语音输入功能。第二种方法:用span模拟,定位span,借助JS键盘事件判断输入,确定span里的内容显示隐藏。无标题文档$...

    第一种方法:

    基于HTML5 input标签的新特性 - placeholder 。另外,x-webkit-speech 属性可以实现语音输入功能。

    第二种方法:

    用span模拟,定位span,借助JS键盘事件判断输入,确定span里的内容显示隐藏。

    无标题文档

    $(document).ready(function(){

    $("#focus .input_txt").each(function(){

    var thisVal=$(this).val();

    //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示

    if(thisVal!=""){

    $(this).siblings("span").hide();

    }else{

    $(this).siblings("span").show();

    }

    //聚焦型输入框验证

    $(this).focus(function(){

    $(this).siblings("span").hide();

    }).blur(function(){

    var val=$(this).val();

    if(val!=""){

    $(this).siblings("span").hide();

    }else{

    $(this).siblings("span").show();

    }

    });

    })

    $("#keydown .input_txt").each(function(){

    var thisVal=$(this).val();

    //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示

    if(thisVal!=""){

    $(this).siblings("span").hide();

    }else{

    $(this).siblings("span").show();

    }

    $(this).keyup(function(){

    var val=$(this).val();

    $(this).siblings("span").hide();

    }).blur(function(){

    var val=$(this).val();

    if(val!=""){

    $(this).siblings("span").hide();

    }else{

    $(this).siblings("span").show();

    }

    })

    })

    })

    form{width:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;}

    label{display:block;height:40px;position:relative;margin:20px 0;}

    span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;}

    .input_txt{width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;}

    .input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;}

    .border_radius{border-radius:5px;color:#B00000;}

    h2{font-family:"微软雅黑";text-shadow:1px 1px 3px #fff;}

    聚焦型提示语消失

    花瓣注册邮箱

    密码

    输入型提示语消失

    花瓣注册邮箱

    密码

    展开全文
  • JavaScript表单提交,失败会在页面文本框提示错误信息,成功则消除
  • 文本框默认显示 “请输入关键字”,当鼠标点击输入框的时候,“请输入关键字”这几个字消失,移出文本框又显示出来Titlefunction Focus(){var tag = document.getElementById('i1');var val = tag.value;if(val == ...
  • 方法二:前端Ajax验证,可设置文本框失去焦点时验证,是实时的验证,用户体验好。在要验证的输入框后添加span标签,用于显示验证是否成功的提示。 flask里一开始我的表单都是根据类渲染生成的,验证用的方法一。...
  • 实现的原理非常的简单,在默认状态以type="text"文本框显示,当点击文本框的时候,以type="password"密码框显示,原来显示的文本框隐藏,也就是说做了一个替换而已。 以上内容是小编给大家分享的JavaScript如何实现...
  • 制作HTML表单(文本框设置对齐等)

    千次阅读 2022-08-05 18:09:33
    运行结果图: 我们可以看到通过可以将我们想要的信息归纳在一个大的类别里,在外观上更加好看,明了。)是不存在的,所以当我们点击完注册登入后,就会出现如下图的报错情况。运行后结果如下,对齐文本框后就显得...
  • HTML表单和输入文本框

    千次阅读 2021-06-08 17:08:46
    HTML 表单用于收集用户输入的各类信息。1)例子文本域这个例子演示了如何在一个 HTML 页中创建文本域。用户可以在文本域中输入文本。密码框这个例子演示了如何在 HTML 页中创建密码输入框。(本文后面提供更多的例子)2...
  • 本篇文章小编给大家分享一下html浮动提示框功能实现代码,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。一般的表单提示总会占据表单的位置,让表单边长,或者变宽,影响布局,但如果让...
  • HTML开发中经常遇到input元素,往往又需要提示使用者输入一定规则的内容,这时最好的一个方法就是在input里面实现一个提示,实现如下方式:输入框为空时提示内容出现,当输入框获得焦点时或输入框不为空时则消失。...
  • 表单的介绍(将前端页面表单的值发送给后台,后台通过表单中name属性取值)可以获取客户端的信息(数据),表单有各种各样的控件,输入框,复选框 按钮等表单的功能:交互功能表单的工作原理:浏览有表单的页面,填写...
  • 输入12位的学号" class="input_style" name="number" pattern="\d{12}" oninvalid="setCustomValidity('必须填写12位的学号');" oninput="setCustomValidity(''
  • 表单添加提示文字

    千次阅读 2021-06-26 12:42:25
    qq_silence_232016-10-21 10:56需要用到 比如要求提示输入用户名在5到25个字符之间在你的js文件中 写如下代码window.onload=function(){//把所有input输入框选择出来var aInput=document.getElementsByTagName('...
  • 单击以显示输入文本框Vue Component ...受Trello启发。 这是我第一次通过npm软件包发布Vue组件,如果您遇到任何问题,错误或改进,请告诉我。 谢谢! View demo 查看演示 Download Source 下载源 安装 ...
  • HTML标签大全(类型)

    千次阅读 2021-06-13 01:58:55
    标 签 内 容备 注基 本 标 签所有HTML文件都有的……...url允许,描述不包含在标准HTML里的文档信息。提供将现行文档与其它文档或实体关联起来的信息指明在服务器上提供文档的可以检索的索引……允许包含样式表(CSS)...
  • 表单用来收集用户信息,HTML中,一个完整的表单通常是由表单域、表单控件、提示信息组成。 表单域:包含表单元素的区域,用于将信息提交给服务台 <form></form>标签用于定义表单域,以实现用户信息的...
  • 复选框本例演示如何在HTML页中创建文本框。用户可以选中或取消选取复选框。单选按钮本例演示如何在HTML中创建单选按钮。简单的下拉列表本例演示如何在HTML页面中创建简单的下拉列表框。下拉列表框是一个可选列表。另...
  • 后面添加如下代码:(class名字可自己随便取,与下面的名字一样即可) u.attr("class", "con"), 同一个js中查找如下代码: s = e(["<style>", "*{margin: 0; padding: 0;}", "body{padding: 10p
  • Axure RP Pro - 相关问题 - 在文本框中显示提示信息虽然Axure RPPro中的交互功能比较简单,但也能实现一些流行的交互,例如在目前的UI/UE设计中,经常会在文本框中显示提示信息,例如在输入姓名的文本框中显示“请...
  • html中input文字框,初始里边有文字提示。当点选时,文字消失,怎么改?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!中input文字框,初始里边有...
  • 文本框的框内提示

    2011-09-05 16:55:22
    最近遇到需要做到把输入框提示放入输入框内部的需求。...2,使用title属性保存提示信息,一来没有多余的东西,二来还可以获得一个停留时的提示。 3,因为IE的password输入框的type属性只读,所以使用show&amp...
  • HTML基础

    2021-06-11 12:00:21
    之前写的东西都是关于 Java 的,最主要都是一些 Java 的核心语法或知识点,但是做 Java Web 开发的话,因为是要做出一个网站,所以那就必须要有展示信息的页面,那应该用什么展示呢?那就是超文本标记语言 HTML 了。1...
  • input 框后面带单位、提示

    千次阅读 2019-12-13 16:27:19
    DOCTYPE html> <html> , initial-scale=1 /> 带单位列表 body { line-height: 24px; font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif; } .wide...
  • 内容选中事件(onselect)选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。如下代码,当选中用户文本框内的文字时,触发onselect 事件,并调用函数message()。运行结果:...
  • JS输入框验证信息提示

    千次阅读 2022-02-19 21:02:01
    文本框变红,并且下方用红字提示:请填写正确的手机号码 如果输入的手机号码正确:文本框属性不发生变化 问题:怎么判断输入的手机号码是否复合要求??? 未写完?? <!DOCTYPE html> <html lang="en...
  • JSP页面input框的提示信息小结 需求如下: 在输入表格内容时,输入框内默认展示提示信息 当鼠标点击输入框时,提示信息消失, 输入框失焦后:若用户未输入,则展示提示信息;若用户已输入,则展示已输入的内容 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,713
精华内容 8,285
热门标签
关键字:

html文本框后面加提示信息