我在登录我的网站时遇到问题，该问题似乎出现在移动 chrome 浏览器中(但适用于某些手机中提供的 web-kit 浏览器)。我正在努力尝试在平板电脑上进入“开发者模式”，但我希望其他人遇到过这个问题，并能在我弄清楚如何实际调试它时为我指明正确的方向。
它是一个 JSF2 应用程序(基于 Bootstrap2.2 的 Primefaces)作为 UI。
我的表单看起来像这样(第二组“onblur”调用是有意查看是否有帮助——但它没有):
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:composite="http://java.sun.com/jsf/composite"
>
<composite:interface>
<composite:attribute name="user" />
<composite:attribute name="pass" />
<composite:attribute name="error" />
<composite:attribute name="loggedIn" />
<composite:attribute
name="loginAction"
method-signature="void actionListener(javax.faces.event.ActionEvent)"
/>
<composite:attribute
name="logoutAction"
method-signature="void actionListener(javax.faces.event.ActionEvent)"
/>
</composite:interface>
<composite:implementation>
<script type="text/javascript">
function copyValue(sourceId, targetId){
var source = '#{cc.attrs.id}:' + sourceId;
var target = '#{cc.attrs.id}:' + targetId;
var sourceEl = document.getElementById(source);
var targetEl = document.getElementById(target);
targetEl.value = sourceEl.value;
};
</script>
<h:form class="navbar-form pull-right" id="login" prependId="false" rendered="#{not cc.attrs.error and !cc.attrs.loggedIn}">
<h:panelGroup rendered="#{!cc.attrs.loggedIn}" layout="span">
<h:inputHidden value="#{cc.attrs.user}" id="userText"/>
<h:inputHidden value="#{cc.attrs.pass}" id="passValue"/>
<input
class="span2"
type="text"
placeholder="Username"
id="#{cc.attrs.id}:userText_a"
>
</input>
<input
class="span2"
type="password"
placeholder="Password"
id="#{cc.attrs.id}:passValue_a"
>
</input>
<h:commandButton
class="btn"
value="Sign in"
onclick="copyValue('userText_a', 'userText'); copyValue('passValue_a', 'passValue');"
actionListener="#{cc.attrs.loginAction}"
/>
<!-- onblur="copyValue('userText_a', 'userText'); copyValue('passValue_a', passValue);" -->
</h:panelGroup>
</h:form>
<h:form class="navbar-form pull-right" id="login_error" prependId="false" rendered="#{cc.attrs.error and !cc.attrs.loggedIn}">
<h:panelGroup rendered="#{!cc.attrs.loggedIn}" layout="span" styleClass="control-group error" style="display:inline-block;">
<h:inputHidden value="#{cc.attrs.user}" id="userText_e"/>
<h:inputHidden value="#{cc.attrs.pass}" id="passValue_e"/>
<input
class="span2"
type="text"
placeholder="Username"
id="#{cc.attrs.id}:userText_b"
onblur="document.getElementById('#{cc.attrs.id}:userText_e').value = this.value;"
>
</input>
<input
class="span2"
type="password"
placeholder="Password"
id="#{cc.attrs.id}:passValue_b"
onblur="document.getElementById('#{cc.attrs.id}:passValue_e').value = this.value;"
>
</input>
<h:commandButton
class="btn"
value="Sign in"
actionListener="#{cc.attrs.loginAction}"
onclick="copyValue('userText_b', 'userText_e'); copyValue('passValue_b', 'passValue_e');"
/>
<br />
<span style="color:orange;">Login failed: Invalid username or password</span>
</h:panelGroup>
</h:form>
<h:form class="navbar-form pull-right" rendered="#{cc.attrs.loggedIn}">
<h:panelGroup class="span2" style="display: inline-block;">
<h:commandLink
value="#{cc.attrs.user} | Sign Out"
class="btn btn-primary"
actionListener="#{cc.attrs.logoutAction}"
/>
</h:panelGroup>
</h:form>
</composite:implementation>
</html>
明确地说，我可以使用 Chrome/IE8+/Firefox/Opera 和移动设备在桌面上登录我只有 Chrome 有问题(我还没有尝试过 iOS 浏览器)。在发布之前，密码提交不会复制到隐藏输入的值。
这可能不是最好的设计，我愿意接受建议。拖入 <h:inputText />组件使样式复杂化，因为我已经在 Primefaces/Bootstrap 上大量回复并搞砸了布局，因此出现了这种“解决方法”。
最佳答案
代替
<input
class="span2"
type="text"
placeholder="Username"
id="#{cc.attrs.id}:userText_b"
onblur="document.getElementById('#{cc.attrs.id}:userText_e').value = this.value;"
>
</input>
<input
class="span2"
type="password"
placeholder="Password"
id="#{cc.attrs.id}:passValue_b"
onblur="document.getElementById('#{cc.attrs.id}:passValue_e').value = this.value;"
>
</input>
<h:commandButton
class="btn"
value="Sign in"
actionListener="#{cc.attrs.loginAction}"
onclick="copyValue('userText_b', 'userText_e'); copyValue('passValue_b', 'passValue_e');"
/>
尽量不要在用户名和密码输入中设置onblur属性，因为onBlur属性在手机上可能会变得棘手。
相反，请尝试在 onClick 事件中执行所有操作。我会在一个函数中做所有事情:
<h:commandButton
class="btn"
value="Sign in"
actionListener="#{cc.attrs.loginAction}"
onclick="submitForm()"
/>
在函数内部:
function submitForm()
{
var objUserText_e = document.getElementById('#{cc.attrs.id}:userText_e');
var objUserText_b = document.getElementById('#{cc.attrs.id}:userText_b');
var passValue_e = document.getElementById('#{cc.attrs.id}:userText_e');
var passValue_b = document.getElementById('#{cc.attrs.id}:userText_b');
objUserText_e.value = objUserText_b.value;
passValue_e.value = passValue_b.value;
/*
copyValue('userText_b', 'userText_e'); copyValue('passValue_b', 'passValue_e');
*/
// remove any return false
// it will prevent the default event to be triggered (actionListener in this case)
}
我认为这将在移动版本中毫无问题地提交值。
顺便问一下，为什么要复制 _e 变量中的输入值？你不能使用原来的 _b 吗？有很多重复很抱歉，如果我不明白你为什么这样做。
旁注:
其他形式的id“登录”也是如此
在onClick事件中，只执行一个 Action 。某些浏览器不执行多项操作，因此，代替:
<h:commandButton
class="btn"
value="Sign in"
onclick="copyValue('userText_a', 'userText'); copyValue('passValue_a', 'passValue');"
actionListener="#{cc.attrs.loginAction}"
/>
这样做:
<h:commandButton
class="btn"
value="Sign in"
onclick="submit()"
actionListener="#{cc.attrs.loginAction}"
/>
然后你可以在提交函数中执行 copyValue 操作:
function submit()
{
copyValue('userText_a', 'userText');
copyValue('passValue_a', 'passValue');
}
这样您将获得尽可能多的跨代理兼容代码。
再一次，尽可能避免使用 copyValue。干杯
关于javascript - 谷歌浏览器移动版 (Nexus 7) |表单提交不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13462444/