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:

posted @ 2017-07-14 12:00  名字不好起啊  阅读(267)  评论(0编辑  收藏  举报