首页 > 代码库 > input 框的 placeholder 另类实现

input 框的 placeholder 另类实现

2024-10-25 12:32:01   206人阅读

　　昨天偶然想到了插入图片，但是图片不够灵活，文字的话想怎么写就怎么写。于是就又搞出了一种实现方式。

　　方法主要在于灵活，将 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 另类实现


联系
我们