input 框的 placeholder 另类实现
Posted 名字不好起啊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了input 框的 placeholder 另类实现相关的知识，希望对你有一定的参考价值。
昨天偶然想到了插入图片，但是图片不够灵活，文字的话想怎么写就怎么写。于是就又搞出了一种实现方式。
方法主要在于灵活，将 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:
以上是关于input 框的 placeholder 另类实现的主要内容，如果未能解决你的问题，请参考以下文章
苹果手机input框上方有一条阴影线以及input框的placeholder颜色的设置