下面代码实测通过,直接copy到本地运行即可。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/angular.js/1.2.14/angular.min.js"></script> <style> .yf-input-container { position: relative; font-size: 14px; margin-bottom: 10px; } .yf-input-container input { height: 20px; line-height: 20px; } </style> </head> <body> <div ng-controller="superPoolCtrl"> <div class="yf-input-container"> 姓名:<input type="text" ng-model="name" yf-placeholder="请输入姓名" /> </div> <div class="yf-input-container"> 电话:<input type="text" ng-model="tel" yf-placeholder="请输入电话" /> </div> <div> <div class="yf-input-container"> 职位:<input type="text" ng-model="job" yf-placeholder="请输入职位" /> </div> </div> </div> <script> var moduleName = 'bidmeApp'; var app = angular.module(moduleName, []) .controller('superPoolCtrl', ['$scope', '$rootScope', '$timeout', function($scope, $rootScope, $timeout) { $timeout(function() { $scope.tel = "13800138000"; }, 1000); $scope.name = "http://www.cnblogs.com/chenchenghua/"; }]) .directive('yfPlaceholder', function() { return { restrict: 'A', //指令取属性 scope: false, //与父级共享作用域 replace: true, require: '', template: function(elem, attr) { return '<input />' }, link: function(scope, element, attr) { var inputEle = element[0]; var supportPlaceholder = "placeholder" in document.createElement("input") ? true : false; if(supportPlaceholder) { inputEle.setAttribute('placeholder', attr.yfPlaceholder); } else { function insertAfter(newElement, targetElement) { // newElement是要追加的元素 targetElement 是指定元素的位置 var parent = targetElement.parentNode; // 找到指定元素的父节点 if(parent.lastChild == targetElement) { // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法 parent.appendChild(newElement, targetElement); } else { parent.insertBefore(newElement, targetElement.nextSibling); }; }; var node = angular.element(document.createElement('span')); node.css({ position: 'absolute', zIndex: '1', color: '#A9A9A9', top: inputEle.offsetTop + 'px', left: inputEle.offsetLeft + 'px', inputEle.offsetWidth + 'px', height: inputEle.offsetHeight + 'px', lineHeight: inputEle.offsetHeight + 'px', textIndent: '5px', cursor: 'text' }).text(attr.yfPlaceholder); angular.element(inputEle).after(node); node.on('click', function(a, b, c) { //点击placeholder,隐藏。input获取焦点 node.css({ "display": 'none' }); inputEle.focus(); }); angular.element(inputEle).on('blur', function() { //input失去焦点时,做判断 if(inputEle.value.length < 1) { node.css({ "display": 'block' }); } }); angular.element(inputEle).on('focus', function() { //input失去焦点时,做判断 if(inputEle.value.length < 1) { node.css({ "display": 'none' }); } }); scope.$watch(attr.ngModel, function(newVal, oldVal) { //监听,比如开始有值或者异步请求回显,placeholder隐藏 if(!!newVal && newVal.length > 0) { node.css({ "display": 'none' }); } }); } } }; }); angular.bootstrap(document.body, [moduleName]); </script> </body> </html>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
欢迎转载,转载请注明作者:飘飞的夏秋 和出处 http://www.cnblogs.com/chenchenghua/p/6757736.html