【问题标题】:Remove selection gray shadow from html input on iOS从 iOS 上的 html 输入中删除选择灰色阴影
【发布时间】:2013-04-09 16:38:33
【问题描述】:

我目前正在为我的 iOS 应用程序开发 html 富文本编辑器,所以,设置很简单,我有一个 UIWebView 加载我的编辑器代码,html 输入是一个 'contentEditable' DIV .

问题是每次我选择这个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。所以我的第二个问题是:如何删除此视图?

【问题讨论】:

  • 你试过-webkit-appearance:none吗?
  • 尝试将outline: none;添加到输入:focus伪元素中。
  • @Bluey 我已经尝试过了,但没有成功!
  • @pbibergal 我试过这个 wright 现在它不起作用了!
  • 首先,我会观察 webView 上的子视图,以确定是否添加了原生子视图,或者它是否在网页渲染器上。这是“我不知道”的方法,但它缩小了修复范围。

标签: html ios css xcode uiwebview


【解决方案1】:

就像设置以下 CSS 规则一样简单。

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

这会使应用的阴影透明,所以看起来好像消失了。

编辑:这是demo link

【讨论】:

  • 感谢@Sacha 的回答,它完美运行,简单干净!
  • 我必须等 11 个小时才能给你赏金!
  • 这个问题在 iOS13 上再次出现。此解决方案不起作用:(
猜你喜欢
  • 1970-01-01
  • 2015-05-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-05-25
  • 2013-10-03
相关资源
最近更新 更多