如果在 HTC 设备上突出显示，WebView 中的输入元素始终具有相同的样式

发布于 2024-10-19 23:27:13 字数 1415 浏览 3 评论 0原文

我目前正在编写一个应用程序，它使用嵌入式 WebView 来显示其内容或有时使用输入表单查询用户的数据。这些表单中的输入字段使用 -webkit-css 样式进行样式设置。

到目前为止，除了配备 HTC Sense 的设备外，该功能在所有设备上都运行良好（已在 Nexus One、LG Optimus 500、Samsung Galaxy S 上进行过测试）。在具有 HTC Sense 的设备上，如果选择了输入元素，样式就会丢失。在 css 中使用 input:focus {} 没有帮助，带有 Sense 的 HTC 设备会直接忽略。

此图说明了这一点，当前选择了“昵称”，但其样式仍应与“Vorname”和“Nachname”相同。

Focus Problem

有什么想法可以解决此问题吗？

这是一个示例 HTML 页面（根据请求）：

<html>
<head>
    <meta name="viewport" content="target-densitydpi=low-dpi" />
    <style type="text/css">
      input[type="number"],
      input[type="text"]{
    border: 1px solid #CDFF3C;
    background: #F3FECA;
    width: 220px;
    -webkit-border-radius: 4px;
        -webkit-box-shadow: inset 1px 1px 4px #AAA;
    -webkit-tap-highlight-color: rgba(205, 255, 60, 0.5);
      }
      body {
        background:#ebffb9;
        margin-right:0;
        margin-left:0;
        font-size: 14px;
      }
    </style>
</head>
<body>
<form name="data" action="/im/postdata" method="get" accept-charset="UTF-8">
  <p class="edit">
    <b>Vorname</b>
    <br/>
    <input type="text" name="3"/>
    </input>
  </p>
</form>
</body>
</html>

无需将其嵌入到应用程序中，只需将其放在 Web 服务器上的某个位置并使用内置的 Web 浏览器打开它即可。

原文

I'm currently writing an app which uses an embedded WebView to display its content or to sometimes query data from the user using input forms. The input fields in these forms are styled using -webkit-css Styles.

This works fine on all Devices (tested on Nexus One, LG Optimus 500, Samsung Galaxy S) so far, except on Devices with HTC Sense. On Devices with HTC Sense the styling gets lost if the input element gets selected. Using input:focus {} in the css doesn't help, the HTC Devices with Sense simply ignore.

This image illustrates it, the "Nickname" is currently selected but should still be styled the same way like "Vorname" and "Nachname" are.

Focus Problem

Any ideas to maybe workaround this problem?

Here is a sample HTML page (upon request):

<html>
<head>
    <meta name="viewport" content="target-densitydpi=low-dpi" />
    <style type="text/css">
      input[type="number"],
      input[type="text"]{
    border: 1px solid #CDFF3C;
    background: #F3FECA;
    width: 220px;
    -webkit-border-radius: 4px;
        -webkit-box-shadow: inset 1px 1px 4px #AAA;
    -webkit-tap-highlight-color: rgba(205, 255, 60, 0.5);
      }
      body {
        background:#ebffb9;
        margin-right:0;
        margin-left:0;
        font-size: 14px;
      }
    </style>
</head>
<body>
<form name="data" action="/im/postdata" method="get" accept-charset="UTF-8">
  <p class="edit">
    <b>Vorname</b>
    <br/>
    <input type="text" name="3"/>
    </input>
  </p>
</form>
</body>
</html>

No need to embed this into an app, simply put it on a web server somewhere and use the built in web browser to open it.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

溇涏 2024-10-26 23:27:13

它可能与：如何设计 HTML INPUT 标记的样式，以便在专注于 Android 2.2+ 时保持 CSS？。

或者，您可以通过使用包含 WebView 的本机应用程序来解决此问题，然后将 res/values/themes.xml 中的主题应用到您的应用程序，该主题用您自己的样式覆盖 webTextViewStyle：


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyTheme" parent="@android:syle/Theme">
        <item name="android:webTextViewStyle">@style/MyWebTextView</item>
    </style>
</resources>

然后将其分配给您的应用程序Manifest：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mywebapp" android:versionCode="1" android:versionName="1">
    <uses-permission android:name="android.permission.INTERNET" />

    <application android:icon="@drawable/icon" android:label="@string/app_name"
        android:theme="@style/MyTheme">
        .
        .
        .
    </application>
</manifest>

然后只需将 html 加载到 WebView 中，然后查看文本输入控件是否采用了新样式。

Alternatively, you may be to work-around it by using a native app containing a WebView, and then apply a theme in res/values/themes.xml to your app which overrides webTextViewStyle with your own style:


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyTheme" parent="@android:syle/Theme">
        <item name="android:webTextViewStyle">@style/MyWebTextView</item>
    </style>
</resources>

Then assign this to you app in the Manifest:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mywebapp" android:versionCode="1" android:versionName="1">
    <uses-permission android:name="android.permission.INTERNET" />

    <application android:icon="@drawable/icon" android:label="@string/app_name"
        android:theme="@style/MyTheme">
        .
        .
        .
    </application>
</manifest>

Then simply load your html in to your WebView and see if the text input control has adopted the new style.

回复收藏 0 原文

~没有更多了~