Question

我在UIWebView中加载了本地html资源。我一直在设计这个html文档看起来像一个带有一些UIButton的UITableView。到目前为止，我取得了相当不错的成功。我只是试图让一个输入类型=按钮像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

<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;
}

Answer 2

试试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。

UIWebView - 用于html输入按钮onmousedown的CSS样式

2 个答案: