这个就是一个输入框的小练习（也是第一次写这个东西）
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="div1">

    <input class="key" type="text" onfocus="func1()" onblur="func2()" value="请输入内容">

</div>

<script>

function func1() {

    var divs=document.getElementsByClassName("div1")[0];

    var ini=divs.getElementsByClassName("key")[0];

    if (ini.value=="请输入内容"){

        ini.value="";

    }

}

function func2() {

    var divs=document.getElementsByClassName("div1")[0];

    var ini=divs.getElementsByClassName("key")[0];

    if (ini.value.trim().length==0){

        ini.value="请输入内容";

    }

}

</script>

</body>

</html>

js输入框练习的更多相关文章

  1. JS输入框邮箱自动提示(带有demo和源码)（转载）

    今天在javascriptQQ群里面 有童鞋问到 有没有 "JS输入框邮箱自动提示"插件,即说都找遍了github上源码 都没有看到这样类似的插件,然后我想了下 "JS输 ...

  2. JS输入框邮箱自动提示(带有demo和源码)

    今天在javascriptQQ群里面 有童鞋问到 有没有 "JS输入框邮箱自动提示"插件,即说都找遍了github上源码 都没有看到这样类似的插件,然后我想了下 "JS输 ...

  3. 编写简易的JS输入框模糊查询匹配（附有源码和demo）

    前言:JS输入框模糊匹配插件以前在工作写过一个类似的 所以这次写轻松很多,这次写优化了几个方面: 1. 添加动态加载css文件 不需要引入css css全部在JS动态生成. 2. 不需要额外的标签 只 ...

  4. JS输入框正则校验

    1. 开发中需要对etl组件统一进行input输入框校验,允许为空,可以不校验,默认校验长度和特殊字符,代码如下,记录以备复用. /** * 数据值校验工具类 */ var checkService ...

  5. jquery.inputmask.js 输入框input输入内容格式限制插件

    今天使用的就是这几行代码. 利用 jquery.inputmask.js  下载地址(如果打不开的话 请FQ http://plugins.jquery.com/jquery.inputmask/) ...

  6. JS 输入框输入数字检查

    <input id='ApplyInputNum' type='text' class='mytext form-control' align='left' onblur='InputCheck ...

  7. Jquery autocomplete.js输入框联想补全功能

    Jquery autocomplete.js插件下载地址:http://files.cnblogs.com/files/jinzhiming/autocomplete.rar 有两种用法,一种是直接使 ...

  8. js 输入框增加删除操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. (js) 输入框只能输入中文、英文、数字、@符号和.符号

    只能输入中文.英文.数字.@符号和.符号<input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z0 ...

随机推荐

  1. 一、【Docker笔记】进入Docker世界

    ​ 我们平时判断一个电脑的性能主要看什么?磁盘读写?CPU的主频高低?还是内存的大小?可是作为个人使用者来说,这些参数高一些足够我们去使用了,可是对于一个大型系统甚至是超大型系统,当前的硬件是远远达不 ...

  2. 常见Web安全漏洞--------防盗链

    1,防盗链防止盗用自己服务上的东西... 2,XSS服务上有这么一张图: <!DOCTYPE html> <html> <head lang="en" ...

  3. Spring ioc xml 实例化bean 自己实现

    public class DefClassPathXmlApplicationContext { private String xmlPath; public DefClassPathXmlAppli ...

  4. jQuery数组去重复

    例如: var yearArray = new Array("三二一", "三二一", "学历", "学历", &quo ...

  5. Android | 教你如何用代码开发一个拍照翻译小程序

    引子   想必有很多小伙伴喜欢外出旅游,能去海外玩一圈那是更好不过了,旅游前大家一定会对吃.穿.住.行.游玩路线做各种攻略,然后满怀期待的出发- 想象中的旅游   出发前,想象中的旅游目的地可能有漂亮 ...

  6. Prism+MaterialDesign+EntityFramework Core+Postgresql WPF开发总结 之 中级篇

    本着每天记录一点成长一点的原则,打算将目前完成的一个WPF项目相关的技术分享出来,供团队学习与总结. 总共分三个部分: 基础篇主要争对C#初学者,巩固C#常用知识点: 中级篇主要争对WPF布局与Mat ...

  7. Pytest系列（13）- 重复执行用例插件之pytest-repeat的详细使用

    如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html 前言 平常在做功能测试的时候,经常 ...

  8. 关于wget下载jdk问题解决

    问题: 直接从jdk官网下载会出现: 正在解析主机 login.oracle.com (login.oracle.com)... 156.151.58.18正在连接 login.oracle.com ...

  9. Go golang语言特性

    一.垃圾回收 1.内存自动回收. 2.只需要创建,不需要释放 二.天然并发: 1.语言层支持并发,对比python,少了GIL锁. 2.goroute,轻量级线程. 3.基于CSP模型实现 三.cha ...

  10. Typora+PicGo+GitHub实现md自带图床效果

    1 GitHub创建作为图床的仓库 1.1 在GitHub中创建一个仓库 注意仓库要是public的,不然上传的图片还是无法使用的.如果不知道怎么创建仓库,可以百度一下. 1.2 在GitHub生成一 ...