從iOS上的html輸入中刪除選擇灰色陰影

我目前正在爲我的iOS應用程序使用HTML富文本編輯器，所以設置很簡單，我有一個UIWebView加載我的編輯器代碼，html輸入是一個' contentEditable'DIV。從iOS上的html輸入中刪除選擇灰色陰影

問題是，每次我選擇這個div來輸入一些文本時，輸入框架上會出現一個淺灰色框，告訴用戶該文本框已被選中。

注意：你可以看到在這個快速video

我的問題的效果是：如何刪除此淺灰色幀？

我的HTML文件是波紋管：

<html> 

<head> 

    <style type="text/css"> 

     :focus{ 

      outline:0px solid transparent; 

     } 

     DIV::-moz-focus-inner { 
      background-color:#ff0000; 
      border: 0; 
      padding: 0; 
     } 

     ul{ 
      margin-left:-10px; 
     } 
     ol{ 
      margin-left:-10px; 
     } 

     blockquote { 

      border-left:#ff0000 5px double; 
      margin-left:0px; 

     } 

    </style> 

</head> 

<body onload="addImgAttributes();checkBlockquote();" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> 

    <div 
     id="content" 
     class="content" 
     contenteditable="true" 
     style="font-family: Helvetica; background-color:#fff; color:#000; height:258px;" 
     autocapitalize="off" 
     autocorrect="off" 
     autocomplete="off" 
     spellCheck="false" 
    > 
    </div> 

</body> 

</html>

// ------------------------------ -------------------------------------------------- ----------------------------------編輯1 -----

在評論@ StephenJ我意識到這個灰色框架可能是UIWebView的一個子視圖，而不是一個css屬性。我在框架出現的確切時刻從UIWebView中記錄了視圖層次結構，這是日誌：

2013-04-17 21:37:00.919 StrangeThings[1182:c07] <UIWebView: 0xa5ec3f0; frame = (7 7; 306 258); layer = <CALayer: 0xa5edf30>> 
2013-04-17 21:37:00.919 StrangeThings[1182:c07] <_UIWebViewScrollView: 0xa5f7850; frame = (0 0; 306 258); clipsToBounds = YES; autoresize = H; gestureRecognizers = <NSArray: 0xa5f7e20>; layer = <CALayer: 0xa5f7aa0>; contentOffset: {0, 0}> 
2013-04-17 21:37:00.920 StrangeThings[1182:c07] <UIImageView: 0xa5f90c0; frame = (0 0; 54 54); transform = [-1, 0, -0, -1, 0, 0]; alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f9120>> 
2013-04-17 21:37:00.920 StrangeThings[1182:c07] <UIImageView: 0xa5f9030; frame = (0 0; 54 54); transform = [0, 1, -1, 0, 0, 0]; alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f9090>> 
2013-04-17 21:37:00.920 StrangeThings[1182:c07] <UIImageView: 0xa5f8fa0; frame = (0 0; 54 54); transform = [0, -1, 1, 0, 0, 0]; alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f9000>> 
2013-04-17 21:37:00.921 StrangeThings[1182:c07] <UIImageView: 0xa5f8b90; frame = (0 0; 54 54); alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f8f70>> 
2013-04-17 21:37:00.921 StrangeThings[1182:c07] <UIImageView: 0xa5f8b00; frame = (-14.5 14.5; 30 1); transform = [0, 1, -1, 0, 0, 0]; alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f8b60>> 
2013-04-17 21:37:00.922 StrangeThings[1182:c07] <UIImageView: 0xa5f8a70; frame = (-14.5 14.5; 30 1); transform = [0, -1, 1, 0, 0, 0]; alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f8ad0>> 
2013-04-17 21:37:00.922 StrangeThings[1182:c07] <UIImageView: 0xa5f89e0; frame = (0 0; 1 30); transform = [-1, 0, -0, -1, 0, 0]; alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f8a40>> 
2013-04-17 21:37:00.922 StrangeThings[1182:c07] <UIImageView: 0xa5f8950; frame = (0 0; 1 30); alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f89b0>> 
2013-04-17 21:37:00.923 StrangeThings[1182:c07] <UIImageView: 0xa5f88c0; frame = (0 228; 306 30); alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f8920>> 
2013-04-17 21:37:00.923 StrangeThings[1182:c07] <UIImageView: 0xa5f8750; frame = (0 0; 306 30); transform = [-1, 0, -0, -1, 0, 0]; alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f8630>> 
2013-04-17 21:37:00.924 StrangeThings[1182:c07] <UIWebBrowserView: 0xc270400; frame = (0 0; 306 258); text = ''; gestureRecognizers = <NSArray: 0xa5f5ac0>; layer = <UIWebLayer: 0xa5f0820>> 
2013-04-17 21:37:00.925 StrangeThings[1182:c07] <UIHighlightView: 0xa5ef210; frame = (-4 -4; 314 266); opaque = NO; layer = <CALayer: 0xa5c0730>> 
2013-04-17 21:37:00.925 StrangeThings[1182:c07] <UIImageView: 0xa0bebc0; frame = (0 251; 306 7); alpha = 0; opaque = NO; autoresize = TM; userInteractionEnabled = NO; layer = <CALayer: 0xa0bec60>> 
2013-04-17 21:37:00.925 StrangeThings[1182:c07] <UIImageView: 0xa0b37d0; frame = (299 0; 7 258); alpha = 0; opaque = NO; autoresize = LM; userInteractionEnabled = NO; layer = <CALayer: 0xa0becd0>>

經過分析所有這些子視圖，我發現一個名爲UIHighlightView，作爲名稱確認，此視圖可能會突出顯示webView.So我的第二個問題是：如何刪除此視圖？

來源

2013-04-17 Mateus

你試過'-webkit-appearance：none'嗎？ – pbibergal

嘗試在輸入'：focus'僞元素中添加'outline：none;'。 – JMWhittaker

@Bluey我已經試過這個，但它沒有奏效！ – Mateus

就像設置下面的CSS規則一樣簡單。

div { 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
}

這使得應用的陰影透明，所以它看起來像它消失了。

編輯：這是demo link。

來源

2013-04-19 13:40:50 Sacha

謝謝@Sacha爲你的答案，它完美的工作，簡單而乾淨！ – Mateus

我必須等待11小時才能給你賞金！ – Mateus

從iOS上的html輸入中刪除選擇灰色陰影

回答

相關問題