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实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
小程序实现搜索框
Jun 19 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
Node.js 中如何收集和解析命令行参数
Jan 08 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 header()函数使用说明
2008/07/10 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
帝国cms目录结构分享
2015/07/06 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
python实现DES加密解密方法实例详解
2015/06/30 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
python中使用np.delete()的实例方法
2021/02/01 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
女性时尚在线:IVRose
2019/02/23 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
夜大毕业生自我评价分享
2013/11/10 职场文书
医学实习生自我鉴定
2013/12/12 职场文书
2014年征兵标语
2014/06/20 职场文书
竞聘自述材料
2014/08/25 职场文书
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
5道关于python基础 while循环练习题
2021/11/27 Python