JavaScript实现的文本框placeholder提示文字功能示例


Posted in Javascript onJuly 25, 2018

本文实例讲述了JavaScript实现的文本框placeholder提示文字功能。分享给大家供大家参考,具体如下:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com JS文本框placeholder提示</title>
</head>
<body>
  <input id="input" type="text" value="请输入关键词">
</body>
<script>
    window.onload = function() {
      var defaultValue = "请输入关键词";
      var input = document.getElementById("input");
      input.style.color = "grey";
      input.onfocus = function() {
        if (this.value == defaultValue) {
          input.value="";
          setCursorPosition(this, 0);
        }
      };
      input.onblur = function() {
        if (this.value == "") {
          this.value = defaultValue;
        }
      };
      input.onkeypress = function(e) {
        e = e || window.event;
        var key = e.charCode || e.keyCode || e.which;
        if (this.value == defaultValue) {
          this.value = "";
          this.style.color = "black";
        }
        if (this.value.length == 1 && key == 8) {
          this.value = defaultValue;
          this.style.color = "grey";
          setCursorPosition(this, 0);
        }
      };
    };
    function setCursorPosition(elem, index) {
      if (elem.setSelectionRange) {
        elem.focus();
        elem.setSelectionRange(index, index);
      }
      else if (elem.createTextRange) {
        var range = elem.createTextRange();
        range.collapse(true);
        range.moveEnd('character', index);
        range.moveStart('character', index);
        range.select();
      }
    }
</script>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试一下运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js中的前绑定和后绑定详解
Aug 01 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
Postman动态获取返回值过程详解
Jun 30 Javascript
js实现全选和全不选功能
Jul 28 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 #Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 #Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 #Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 #Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 #Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 #jQuery
详解Vue源码学习之callHook钩子函数
Jul 25 #Javascript
You might like
php语言流程控制中的主动与被动
2012/11/05 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
Python实现的简单万年历例子分享
2014/04/25 Python
python配置grpc环境
2019/01/01 Python
Python实现FTP文件传输的实例
2019/07/07 Python
python实现多进程通信实例分析
2019/09/01 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
中学教师教学工作总结
2015/08/13 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP