jquery 显示提示功能无法在基于 webkit 的浏览器中工作
我有一个 jquery 函数，当我单击表单上的输入字段时，它会显示/隐藏看起来像“提示”的跨度。
该功能在 FirfFox、Chrome、IE(!) :) 等上运行良好，但在基于 webkit 的浏览器（即 Safari 和 Android）上根本不起作用（经过测试）
$(function(prepareInputsForHints) {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
(function(i) {
// Let the code cleane
var span = inputs[i].nextElementSibling;
if(span instanceof HTMLSpanElement) {
if(span.className == "hint") {
span.onmouseover = function() { this.isOver = true; }
span.onmouseout = function() { this.isOver = false; if(!inputs[i].isFocus) inputs[i].onblur(); }
// the span exists! on focus, show the hint
inputs[i].onfocus = function () {
this.isFocus = true;
span.style.display = "inline";
}
// when the cursor moves away from the field, hide the hint
inputs[i].onblur = function () {
this.isFocus = false;
if(!span.isOver) span.style.display = "none";
}
}
}
})(i);
}
});
另外，为了您的方便，我为您提供 http://jsfiddle.net/eZnYY/1/
I have a jquery function that shows/hides spans that look like "tips" when I click an input field on a form.
The function works great on FirfFox,Chrome,IE(!) :) , etc. But not at all on webkit based browsers aka Safari and Android (tested)
$(function(prepareInputsForHints) {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
(function(i) {
// Let the code cleane
var span = inputs[i].nextElementSibling;
if(span instanceof HTMLSpanElement) {
if(span.className == "hint") {
span.onmouseover = function() { this.isOver = true; }
span.onmouseout = function() { this.isOver = false; if(!inputs[i].isFocus) inputs[i].onblur(); }
// the span exists! on focus, show the hint
inputs[i].onfocus = function () {
this.isFocus = true;
span.style.display = "inline";
}
// when the cursor moves away from the field, hide the hint
inputs[i].onblur = function () {
this.isFocus = false;
if(!span.isOver) span.style.display = "none";
}
}
}
})(i);
}
});
Also, for your convenience i provide you with http://jsfiddle.net/eZnYY/1/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
尝试将代码行：替换
为下一个：
http://jsfiddle.net/eZnYY/3/在桌面 Safary 和 Android 浏览器（模拟器）上检查
Try to replace you code line:
with next:
http://jsfiddle.net/eZnYY/3/ Checked on desktop Safary and Android browser (emulator)
您应该使用 jQuery 方法来确保跨浏览器兼容性（您的问题有 jQuery 标签）。
这是纯 JavaScript。将代码转换为 jQuery，使用 jQuery 事件并设置 css。
例如：
你的代码
jQuery
You should use the jQuery methods to ensure cross browser compatibility (your question has the jQuery Tag).
This is pure javascript. Convert your code to jQuery, use the jQuery events and set the css.
For example:
your code
jQuery
我不明白的是，如果你使用jquery，为什么不在你的函数中利用它？我向您保证，如果您使用 jquery 附加事件，它们将在 webkit 和所有其他浏览器中工作。
What I don't understand is, if you're using jquery, why are you not leveraging it in your function? I assure you that if you were to use jquery to attach the events, they will work in webkit and all other browsers.