昨天偶然想到了插入图片，但是图片不够灵活，文字的话想怎么写就怎么写。于是就又搞出了一种实现方式。
方法主要在于灵活，将 ie 与 chrome 的差异性尽量降低。
这里使用 angular 最终可以封装为指令，利于调用等~
下面我们上代码：
<!DOCTYPE html> <html ng-app='myApp'> <head> <meta charset='utf-8'> <script src='angular.js'></script> <script src='jquery-1.11.3.js'></script> <style> .d1 { position: relative; } .input1 { background: transparent; } .span1 { font-size: 13.33px; color: #999; position: absolute; top: 4px; left: 2px; z-index: -1; } </style> </head> <body> <div ng-controller='myCtrl'> <div class='d1'> <input type='text' ng-model="inputValue" class="input1"/> <span class='span1' ng-if="!inputValue">{{message}}</span> </div> </div> <script> angular.module("myApp",[]) .controller("myCtrl",function($scope){ $scope.message = '请输入'; }) </script> </body> </html>
看起来很简单，说的没错，压根就不难，思路想当简单：利用一个 span 装载提示词，将其悬浮在 input 框下即可~~~
ie9:
chrome:
