input框取消光標顏色手機端不生效

<style>
input{
color:transparent;
}
</style>
<input  value="我要隱藏光標">


//文字顏色可以使用text-shadow屬性

<style>
input{
color:transparent;
text-shadow:0 0 0 red;
}
</style>

PC端沒問題，但是手機端測試無效。

 

參考鏈接：http://blog.csdn.net/u010730897/article/details/72721960

這里我用div模擬一個：

div.box{
            position: relative;
        }
        input.class3 {
            width:100px;
            height:50px;
            font-size: 50px;
            position:absolute;
            top:0;
            left:0;
            border:none;
            outline:none;
            color:transparent;
            opacity: 0;
        }
        #bbb{
            width:100px;
            height:50px;
            border:2px solid #e74c3c;
            position:absolute;
            top:0;
            left:0;
        }

<div class="box">
    <div  id="bbb"></div>
    <input type="text" name="aaa" id="aaa" class="class3" oninput="myFun(this)">
</div>

<script>
    function myFun(e){
        document.getElementById("bbb").innerHTML=e.value;
        console.log(document.getElementById("bbb").innerHTML);
    }
</script>

 PC端沒問題，但是手機端依然測試無效。

 

 

 

還可與使用一個方法：

給div或者p加

contenteditable="true" 屬性 然后獲取他的值就好了

但是原理跟input的基本一樣