INPUT提示效果

最新推荐文章于 2023-04-23 17:27:08 发布
最新推荐文章于 2023-04-23 17:27:08 发布
阅读量1k 收藏
点赞数
分类专栏： 网站建设 文章标签： input function xhtml javascript class html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/freejs/article/details/3434526
版权
<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
http://www.corange.cn//uploadfiles/0922-2_40352.jpg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
margin-left: 20px;
}
.inp {
BACKGROUND-POSITION: -70px -424px;
WIDTH: 150px;
padding: 2px;
border: 1px solid #cedbe3;
color: #FF6600;
}
.inp2 {
BORDER-RIGHT: #84a1bd 1px solid;
BACKGROUND-POSITION: -70px -424px;
BORDER-TOP: #84a1bd 1px solid;
BORDER-LEFT: #84a1bd 1px solid;
WIDTH: 450px;
BORDER-BOTTOM: #84a1bd 1px solid;
padding: 2px;
color: #FF6600;
}
body,td,th {
font-size: 12px;
}
-->
</style></head>
<SCRIPT language=JavaScript>
<!--
function $( id ){return document.getElementById( id );}
function fEvent(sType,oInput){
switch (sType){
case "focus" :
oInput.isfocus = true;
case "mouseover" :
oInput.style.borderColor = '#FF9900';
oInput.style.backgroundColor = '#FFFFEC';
break;
case "blur" :
oInput.isfocus = false;
case "mouseout" :
if(!oInput.isfocus){
oInput.style.borderColor='#cedbe3';
oInput.style.backgroundColor = '#FFFFFF';
}
break;
}
}
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</SCRIPT>
<body>
姓名： <INPUT name="user" class="inp" onFocus="fEvent('focus',this)" onBlur="fEvent('blur',this)" οnmοuseοver="fEvent('mouseover',this)" οnmοuseοut="fEvent('mouseout',this)">
电话： <INPUT name="tel" class="inp" onFocus="fEvent('focus',this)" onBlur="fEvent('blur',this)" οnmοuseοver="fEvent('mouseover',this)" οnmοuseοut="fEvent('mouseout',this)">
</body>
</html>
piperzero
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
input 标签实现输入框带提示文字效果(两种方法)
08-29
input 标签实现输入框带提示文字效果（两种方法） 在 HTML5 和 CSS3 的帮助下，我们可以轻松地实现输入框带提示文字效果，而无需使用 JavaScript。这篇文章将介绍两种方法来实现输入框带提示文字效果。 方法一：...
jquery表单input输入框动画提示效果代码
11-11
"jQuery表单input输入框动画提示效果代码"就是一个针对这一目标的设计实践。jQuery库以其简洁、强大的API，使得创建复杂的动态效果变得相对简单，尤其是在处理用户输入时的反馈提示。 jQuery中的`focus`、`blur`、`...
input的使用，input的属性
tjq11111的博客
11-10 664
个人理解:w3c为准 input在以往一直配和label标签使用（label的name属性对应表单的id属性），点击label标签的内容，对应的input会获得页面焦点，并且label标签可以提示用户此处的input表单应填写的内容。 现css3新增属性placeholder逐渐代替了label提示用户input表单应填写的内容。 input常用属性： type：最基本的属性，定义表单的类型 name：最基本的属性，为表单命名 placeholder：占位符 autofocus：...
html input 提示文字
王安的博客
02-23 3950
原文地址：input 提示文字">html input 提示文字作者：王小安input name="passwd_fw" id="passwd_fw" type="password" placeholder="登录密码"  value="" 〉 type=password            提示文字也变成密文   使用  placeholder="登录密码"属性 解决
【HTML5】HTML5 新增 input 表单属性 ( required 属性 | placeholder 属性 | autofocus 属性 | autocomplete 属性 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-19 5524
一、HTML5 新增 input 表单属性 1、required 属性 2、placeholder 属性 3、autofocus 属性 4、autocomplete 属性 5、multiple 属性
HTML|input|placeholder|：focus伪类选择器|backgound|rgba(0-255,0-255,0-255,0-1)|border|padding|margin
weixin_63189859的博客
11-14 479
不过，当盒子不设置宽度时，padding 不会撑开盒子（不会影响实际大小）喔。代码：文本框 作用：主要用于 input表单标签 中获取光标焦点。作用：用于 input表单标签文本框内 文字提示。注意：外边距会影响盒子实际大小，单位：px。作用：主要用于设置背景(没有顺序)注意：一般代码前都带有以下两行代码。注意：内边距会影响盒子实际大小。注意：边框会影响盒子实际大小。作用：设置盒子模型的内边距。作用：设置盒子模型的外边距。作用：设置盒子模型的边框。
Input属性详解
qq_48621951的博客
07-29 1万+
注意radio（单选框）需要value值相等才可以实现单选的功能，value值可以随意设。（1）当inputtype=“text”、“password”、"hidden"时，定义输入字段的初始值；（2）当inputtype=“button”、“reset”、"submit"时，定义按钮上的显示的文本；（3）当inputtype=“checkbox”、“radio”、"image"时，定义与输入相关联的值；1.name属性元素的名称，也就是name的值代表当前input元素的名字；...
jquery_input提示
01-19
首先，我们需要理解input提示的基本概念。在Web表单中，input元素用于接收用户输入。有时，为了帮助用户输入正确的信息或引导他们选择特定的选项，开发人员会添加提示信息。这种提示通常在input字段获得焦点时显示，...
input输入框鼠标焦点提示信息
09-03
在这些框架中，你可以创建一个自定义组件，封装输入框及提示信息的逻辑，这样不仅可以统一处理所有输入框的提示，还可以轻松地添加其他交互效果，如验证、错误提示等。 总之，输入框的提示信息管理是网页表单设计中...
jQuery制作input提示内容（兼容IE8以上）
10-19
这个属性的语法非常简单，只需在input元素中加入placeholder属性并赋予其提示文本即可，例如： ```html <input type="text" placeholder="请输入搜索内容"> ``` 然而，这一属性在较旧的IE浏览器版本中并不支持。...
＜Input /＞输入框及input的相关属性
outstanding木槿
04-23 4448
accept属性用来规定能够通过文件上传进行提交的文件类型。type="button"、"reset"、"submit"用于定义按钮上的显示的文本。readonly属性可与type="text"或"password"的input元素配合使用。type="text"、"password"、"hidden"用于定义输入字段的初始值。type="checkbox"、"radio"、"image"用于定义与输入相关联的值。该属性只能与type="text"或type="password"的input元素配合使用。
input常见属性
whatareyougoo的博客
01-12 1340
type属性：定义input输入框类型，如颜色，日期，单选等等 placeholder属性：用于为input类型的输入框提供相关提示信息，它在输入信息为空时以灰色显示出来而输入框获得焦点时自动消失 required属性：用于在form表单提交数据前，为input类型的输入框规定必须填入数据，如果未输入则有错误信息提示 pattern属性：用于在form表单提交数据前为input类型的输入框规定数据必须符合正则表达式，如果格式不正确则有错误信息提示 disabled属性：用于禁用input类型的输入框，被禁.
关于input的value用法介绍
小青头的博客
07-27 4434
不同type下input的含义和用途 使用jQuery选择器获取value值的注意事项 radio checkbox option text 不同type下input的含义和用途 type类型 input用途 value值的含义 text 单行文本框 文本框中默认初始内容 password 用来输入密码的单行文本框(文...
前端基础input输入框主要属性
m0_58849641的博客
09-17 1万+
　1、单行输入框< input type"text"/>。单行文本的输入框常用来输入简单的信息，例如用户名、账号等等。具体的属性有：name、value、maxlength。 　　2、密码输入框<input type=”password”/>。其内容以圆点的形式显示。 　　3、但选按钮<input type-”radio”/>。单选按钮用于单项选择，在定义单选按钮时必须为同一组中的选项制定相同的name值，可以对单选按钮应用checked属性，制定默认选中项。 　　4、复
input所有属性及作用
hanbic的博客
01-30 1万+
type：该属性是input标签里唯一的必须输入的属性，当然，也可以不填，默认为type = “text”。 required：标记一个字段是否为必须。如果一个字段被标记为required = “required”（严格模式下），或者required（宽松模式下）(ps：下面属性的写法同理，就不一一写出了)，并且这个字段的值为空，或者填入的值是无效值，那么这个表单不能提交。什么是无效值？看pattern属性。 pattern：该属性包含了一个JavaScript风格的正则表达式，输入的内容必须完全匹配该正.
Input框内的提示文字变化效果
gooodi的博客
11-01 3265
大致效果如下: 点击前,灰色的placeholder的效果(其实不是写在placeholder里的) 点击后效果,变小 上移   代码如下: Html: (都是重复的这里就贴了其中一行的) &lt;div&gt; &lt;div class="floatText"&gt;手机号&lt;/div&gt; &lt;input id="mobileNum" cla...
input设置默认提示的属性
weixin_30814319的博客
10-09 830
placeholder="请输入截至日期" 转载于:https://www.cnblogs.com/ment/p/7642440.html
HTML5里的input标签的required属性提示文字修改
热门推荐
kakaxiD的博客
05-16 1万+
input 里面增加这样的语句： <input type="text" placeholder="您的姓名" required oninvalid="setCustomValidity('请输入您的姓名');" oninput="setCustomValidity('');" />
input中的placeholder属性
qq_1240545777的博客
03-19 8003
placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。注释：placeholder 属性适用于以下的 &lt;input&gt; 类型：text, search, url, telephone, email 以及 password。使用：效果图：当因为用户名或密码错误，想子啊input中提示的时候，首先应该吧input....
uniapp 如何使用input做出输入提示效果
最新发布
05-27
要在uniapp中实现输入提示效果，可以使用`<input>`组件的`@input`事件和`<popup>`组件。 首先，在`<template>`中创建一个`<input>`和一个`<popup>`： ```html <input type="text" @input="handleInput" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值