【转】input输入框的各种样式_weixin_30821731的博客-程序员宅基地

技术标签: ViewUI  javascript  

输入框景背景透明:
<input style="background:transparent;border:1px solid #ffffff">

鼠标划过输入框,输入框背景色变色:
<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" οnmοuseοver="this.style.borderColor='black';this.style.backgroundColor='plum'"
style="width: 106; height: 21"
οnmοuseοut="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">

输入字时输入框边框闪烁(边框为小方型):
<Script Language="JavaScript">
function borderColor(){
if(self['oText'].style.borderColor=='red'){
self['oText'].style.borderColor = 'yellow';
}else{
self['oText'].style.borderColor = 'red';
}
oTime = setTimeout('borderColor()',400);
}
</Script>
<input type="text" id="oText" style="border:5px dotted red;color:red" οnfοcus="borderColor(this);" οnblur="clearTimeout(oTime);">

输入字时输入框边框闪烁(边框为虚线):
<style>
#oText{border:1px dotted #ff0000;ryo:expression(οnfοcus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},οnblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
</style>
<input type="text" id="oText">

自动横向廷伸的输入框:
<input type="text" style="huerreson:expression(this.width=this.scrollWidth)" value="abcdefghijk">

自动向下廷伸的文本框:
<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">输入几个回车试试</textarea>

只有下划线的文本框:
<input style="border:0;border-bottom:1 solid black;background:;">

软件序列号式的输入框:
<script for="T" event="onkeyup">
if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
</script>
<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T7" size="5" maxlength="3">

软件序列号式的输入框(完整版):
<script for="T" event="onkeyup">if(value.length==maxLength)document.all[event.srcElement.sourceIndex+1].focus();</script>
<script for="T" event="onfocus">select();</script>
<script for="Submit" event="onclick">
var sn=new Array();
for(i=0;i<T.length;i++)
sn=T.value;
alert(sn.join("—"));
</script>
<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">
<input type="submit" name="Submit">

转载于:https://www.cnblogs.com/savageworld/archive/2007/05/05/736096.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30821731/article/details/97070186

智能推荐

通过一个实例理解“父相子绝”(CSS重难点,附完整代码)_父相子绝代码_微子细的博客-程序员宅基地

本文笔记基于「千古壹号」的GitHub项目:https://github.com/qianguyihao/web效果图:代码:&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="widt...

shell编程_套码的汉子的博客-程序员宅基地

shell编程一.bash脚本 编程(shell &amp; Linux kernel)shell bash:解释器,启动器Bash 是一个与 sh 兼容的命令解释程序,可以执行从标准输入或者文件中读取的命令。 Bash 也整合了 Korn 和 C Shell (ksh 和 csh) 中的优秀特性。 Bash 的目标是成为遵循 IEEE POSIX Shell and To...

Android 通过JNI实现守护进程_jni 获取进程pid_LeBron_Six的博客-程序员宅基地

开发一个需要常住后台的App其实是一件非常头疼的事情,不仅要应对国内各大厂商的ROM,还需要应对各类的安全管家...虽然不断的研究各式各样的方法,但是效果并不好,比如任务管理器把App干掉,服务就起不来了...网上搜寻一番后,主要的方法有以下几种方法,但都是治标不治本:1、提高Service的优先级:这个,也只能说在系统内存不足需要回收资源的时候,优先级较高,不容易被回收,然并卵...

随便推点

Transformer(gpu)代码复现_transformer使用gpu_Mr-w-b的博客-程序员宅基地

逐行注释,逐行解析。本地配备gpu环境可直接运行。相比cpu版本没有任何删减,增加的几行代码已做标识。code from https://github.com/graykode/nlp-tutorial/tree/master/5-1.Transformer

Docker(一):入门教程_weixin_34088838的博客-程序员宅基地

2013年发布至今, Docker 一直广受瞩目,被认为可能会改变软件行业。 但是,许多人并不清楚 Docker 到底是什么,要解决什么问题,好处又在哪里?本文就来详细解释,帮助大家理解它,还带有简单易懂的实例,教你如何将它用于日常开发。 一、环境配置的难题 软件开发最大的麻烦事之一,就是环境配置。用户计算机的环境都不相同,你怎么知道自家...

python PTA合集_输入一个n(n>=1),输出形如以下格式的图形,每个数字后面空3格 0 0 1 0 1 2 0 1 _神威 的博客-程序员宅基地

**************传送门**************可逆素数 (30 分)把字符串中十六进制字符转换成十进制整数 (25 分)Python-任意多行字符串拆分数值求和 (20 分)统计并输出字符串中小写元音字母的个数 (30 分)JMU-Python-分段函数 (20 分)集合和列表,按从小到大的顺序组合成一个字典 (10 分)字符串判等 (10 分)字符串相减 (100 分)能被3,5和7整除的数的个数(用集合实现) (30 分)字典输入输出 (15 分)统计字符频次 (10 分)统计字符串中每

2021-03-29_多弗朗明明的博客-程序员宅基地

今天讲了很有意思的,自己写&lt;string.h&gt;函数库中的一些函数,比如字符串的链接,字符串的比较等等。有个比较重要的点,全老师说到了,就是在函数调用时一定要先判断指针及字符是否为空。#include&lt;assert.h&gt;assert(NULL!=str);还有const int *p = &amp;a;和int const *p = &amp;a;这两种写法是一样的,封锁i的都是指针的指向能力;int * const p = &amp;a;修饰的是指针变量自身;const

js随记3 -- slice,splite,splice的区分 contact:数组拍平_contact js_阿晴熙熙的博客-程序员宅基地

前言:看到了JavaScript高级程序设计的数组部分,系统接收了数组的方法,发现有一些东西可以拎出来总结总结。slice方法:字符串,数组所有使用方法几乎相同作用:从字符串中提取子字符串用法:接收一个/俩个参数(开始位置,结束位置)结束位置不取负值=字符串长度+负值结束位置小于开始位置,返回空字符串/数组splite方法:字符串所有作用:将字符串根据传入参数进行切割为数组用法:接收一个/俩个参数(切割参数,数组大小) let str = “a,b,c,c,y” .

5G网络部署行业应用的关键使能技术_使能技术是什么意思_H3C-Navigator的博客-程序员宅基地

随着5G的成熟,应用领域进一步向eMBB(增强移动宽带)、mMTC(海量机器类通信)和uRLLC(超可靠低时延通信)拓展,产生了如车联网、云AR/VR、元宇宙、无人机、高清直播、工业控制等新场景。这些新应用领域对网络能力提出了更高要求。行业客户除了使用5G网络提供无线网络和本地分流,将业务在本地卸载,提供meAPP边缘应用,还可以参与无线网络深度定制,基于无线开放定制框架,就近提供xAPP和rAPP,保障行业应用QoS和业务诉求,更进一步5G网络可与集成自研或第三方的MEP平台,提供更为丰富的公共增值业务。