这个就是一个输入框的小练习(也是第一次写这个东西)
<!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. 一、配置Ubuntu网络设置大纲

    root@ubuntu:为我的Ubuntu系统,即 用户名@主机名: 1.改主机名 ifconfig查询本机IP地址vim  /etc/hostname进入i编辑更改,改完按esc键 然后:wq!保存 ...

  2. coding++:事务管理 隔离级别

    在声明事务时,只需要通过value属性指定配置的事务管理器名即可,例如:@Transactional(value="transactionManagerPrimary"). 除了指 ...

  3. js Object方法小结

    1. Object.defineProperty(obj,prop,{                 value:...,                 writable:boolean,//可写 ...

  4. Tainted canvases may not be exported的问题解决

    项目里使用到用canvas生成海报,在toDataURL报了这个错误Tainted canvases may not be exported. 原因就在于使用了跨域的图片,所以说是被污染的画布.解决方 ...

  5. OI滚粗记

    1) 第一次接触OI是在初一,现在算下都四年了,最开始还是用的Pascal,而现在,Pascal都快被淘汰了.四年的OI生涯让我领会了很多,虽然失去了很多,但是也收获了少,这场名叫OI的生活,我不后悔 ...

  6. c语言提取浮点型数据的整数部分与小数部分几种方法

    一 前记 最近涉及到把各种传感器的数据通过wifi和bt传输出去,这就涉及到了浮点传输的问题,为了方便传输,笔者的做法一般是把小数和整数部分分开,分别传输,这就比较简单明晰了. 二 方法论 其实,把浮 ...

  7. [教程]KALI LINUX 2.0 2019 更新国内源

    2019年最新版本KALI 为 KALI 2019.1 下载地址:https://www.kali.org/downloads/ 有的新入门的朋友可能会问,为什么每次都无法手动更新 例如:Update ...

  8. Linux学习第10天-命令执行顺序控制与管道

    学习重点: cut,grep,wc,sort命令的使用 管道的理解 一.顺序执行多条命令 当我们需要使用apt-get安装一个软件,然后安装完成后立即运行安装的软件(或命令工具),又恰巧你的主机才更换 ...

  9. Python机器学习笔记 集成学习总结

    集成学习(Ensemble  learning)是使用一系列学习器进行学习,并使用某种规则把各个学习结果进行整合,从而获得比单个学习器显著优越的泛化性能.它不是一种单独的机器学习算法啊,而更像是一种优 ...

  10. ThinkPHP5中raw的作用

    在tp5中,我们一般在模板中输出变量是这样的:{$test} 但是有时候在有些源码中我们可以看到这样的方式:{$test|raw} 这个时候如果你去找手册会发现,全文基本没有提到这个raw的作用. 那 ...