UIWebView - html 输入按钮 onmousedown 的 css 样式

Question

我在 UIWebView 中加载了本地 html 资源。我一直在将该 html 文档的样式设置为看起来像带有一些 UIButton(s) 的 UITableView。到目前为止，我已经取得了不错的成功。我只是想让 input type=button 像 UIButton 一样工作，当你按下它时它会变成蓝色。不幸的是，当您按下按钮时，我不知道如何关闭或重新设置变成灰色的按钮（这是它在 UIWebView 上工作的默认方式）。这是我的按钮：

<input class="iPhoneStandardButton"
        onmousedown="changeStyle(this,'iPhoneStandardButton_press');" 
        onmouseup="changeStyle(this,'iPhoneStandardButton');" 
        type="button"
        value="My Button" />

我的 changeStyle 函数（我已经证明这是可行的）：

function changeStyle(element, newClassName){
   element.setAttribute("class", newClassName);
}

还有我的 CSS：

.iPhoneStandardButton {
    width: 100%;
    height: 40px;
    background: #FFF;
    border-radius: 12px;
    border: 1px solid #CCC;
    font-size: 13;
    font-weight: bold;
    color: #000000;
    margin-bottom: 15px;
}
.iPhoneStandardButton_press{
    width: 100%;
    height: 40px;
    border: solid 1px #666666;
    background: #058CF5;
    background: -webkit-gradient(linear, left top, left bottom, from(#058CF5), to(#015DE6));
    background: -moz-linear-gradient(top,  #058CF5,  #015DE6);
    border-radius: 12px;
    font-size: 13;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 15px;
}

我对这些样式很满意，只是它不适用于 onmousedown。它仍然显示为默认的灰色模糊按钮按下，UIWebView/safari 似乎对所有按钮强制执行。

Answer 1

试试ontouchstart。 iOS Safari 文档列出了onmousedown，但它对我也不起作用，使用ontouchstart 解决了这个问题。有关 Apple 声称支持的所有 Javascript 事件的列表，请参阅 http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7。

Answer 2

<input class="iPhoneStandardButton"
        onclick="toggleStyle(this, 'iPhoneStandardButton', 'iPhoneStandardButton_press');" 
        type="button"
        value="My Button" />

---

function toggleStyle(element, defaultStyle, altStyle) {
    if (element.className == defaultStyle)
        element.className = altStyle;
    else
        element.className = defaultStyle;
}