从iOS上的html输入中删除选择灰色阴影 [英] Remove selection gray shadow from html input on iOS
本文介绍了从iOS上的html输入中删除选择灰色阴影的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在为我的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 =0bottommargin =0leftmargin =0rightmargin =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>
// ------------------- -------------------------------------------------- --------------------------------------------- EDIT 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我的第二个问题是如何删除此视图？
解决方案
设置以下CSS规则很简单。
div {
- webkit-tap-highlight-color：rgba（0，0，0，0）;
}
这使得应用的阴影透明，所以看起来好像消失了。 >
编辑：以下是演示链接。
I'm currently working on html rich text editor for my iOS application,so,the setup is simple,i have a UIWebView loading my editor code,the html input is a 'contentEditable' DIV.
The problem is that every time i select this div to enter some text,a light gray frame appears on the input frame,telling the user that the textfield has been selected.
NOTE:You can see the effect in this quick video
My question is:How to remove this light gray frame?
My html file is bellow:
<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>
//------------------------------------------------------------------------------------------------------------------ EDIT 1 -----
After the comment of @StephenJ i realized that this gray frame might be a subview of the UIWebView and not a css property.I logged the view hierarchy from the UIWebView in the exact moment that the frame appeared,this is the log:
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>>
After analyzing all these subviews i found one named UIHighlightView,as the name confirm,this view might highlighting the webView.So my second question is:How to remove this view?
解决方案
It's as simple as setting the following CSS rule.
div {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
This makes the applied shadow transparent so it seems like it's gone.
Edit: Here's a demo link.
这篇关于从iOS上的html输入中删除选择灰色阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
