这个就是一个输入框的小练习（也是第一次写这个东西）
<!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. 俩个对象的hashCode()相同，则equals()也一定为true,对吗？

    不对,俩个对象的hashCode()相同,equals()不一定为true. 代码示例: 1 String str1 = "通话"; 2 String str2 = "重 ...

  2. LeetCode（一） jump game

    一. 1. #include<iostream> #include<cmath> using namespace std; bool CanJump(int n[],int n ...

  3. Pytest系列（5） - 用例执行的几种状态

    如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html 用例执行状态 用例执行完成后,每条 ...

  4. 通过pycharm使用git和github的步骤（图文详解）

    一.在Pycharm工具中配置集成Git和GitHub.1.集成Git. 打开Pycharm,  点击File-->Settins-->Version Control-->Git 然 ...

  5. 关于C#三层架构增删改查中的“修改”问题

    先来一个界面图: DAO中的方法: 这里需要获得数据的ID,进而进行操作. 之后是代码的实现: 修改的功能中需要注意的是:根据项目具体需要来判断修改的内容. 希望对您有所帮助!

  6. 手动搭建I/O网络通信框架2：Socket和ServerSocket入门实战，实现单聊

    第一章:手动搭建I/O网络通信框架1:Socket和ServerSocket入门实战,实现单聊 在第一章中运用Socket和ServerSocket简单的实现了网络通信.这一章,利用BIO编程模型进行 ...

  7. Shell:Day10

    shell脚本:明白一点:shell脚本本身是一个工具 在写shell脚本之前,就要明白:这个功能能到底如何实现? curl 访问文件源代码,查看网站状态: 才能通过shell(bash)所提供的逻辑 ...

  8. canvas压缩、裁切图片和格式转换的方法

    按照大小压缩图片,或者按照特定分辨率裁切图片,转为blob数据.自动处理ios中可能存在的照片偏差90°问题. 例如,获取300*300大小的头像,实现以下效果: 使用方式: <!-- 引入js ...

  9. CH5701 开车旅行(倍增dp+set)

    传送门 解题思路: 一道比较有趣的题,解题工作主要分为两块: ①找出k(k=0表示小A先走,k=1表示小B先走,下面同理)从点i出发下一个到达的点to[k][i]; 一开始偷懒用了vector(偷懒一 ...

  10. CH5105 Cookies （线性dp）

    传送门 解题思路: 贪心的想,贪婪值越大的孩子应该分得更多的饼干,那么先sort一遍在此基础上进行dp.最直观的方向,可以设dp[i][j]为前i个孩子一共分得j块饼干的怨恨最小值.然后转移第i+1个 ...