Html 电子邮件输入表单在不同浏览器中显示/工作不正常
我有一个简单的表单,它只有两个输入控件:一个用于接收电子邮件的文本框和一个提交按钮 HTML:Html 电子邮件输入表单在不同浏览器中显示/工作不正常,html,internet-explorer,firefox,cross-browser,Html,Internet Explorer,Firefox,Cross Browser,我有一个简单的表单,它只有两个输入控件:一个用于接收电子邮件的文本框和一个提交按钮 HTML: <form class="form-wrapper cf"> <input type="text" placeholder="Enter your email here..." required> <button type="submit"> Submit </button> </form> 提交 JSFiddle:
<form class="form-wrapper cf">
<input type="text" placeholder="Enter your email here..." required>
<button type="submit">
Submit
</button>
</form>
提交
JSFiddle:
表单在不同浏览器中存在问题:
<form class="form-wrapper cf">
<input type="text" placeholder="Enter your email here..." required>
<button type="submit">
Submit
</button>
</form>
- 铬:工作和显示良好
- iPhone:工作正常,显示良好
- Firefox 22:
文本未显示,无法键入任何内容 还有文本框占位符
- Internet Explorer 10:工作正常,但是
文本被裁剪占位符
占位符
和必需的
参数,使其非常简单,但在Firefox上仍然不起作用。我认为您尝试在所有浏览器中运行“占位符”。
然后只需附加一个.js文件,它在所有浏览器中都可以正常工作
;(function(window, document, $) {
var isInputSupported = 'placeholder' in document.createElement('input'),
isTextareaSupported = 'placeholder' in document.createElement('textarea'),
prototype = $.fn,
valHooks = $.valHooks,
hooks,
placeholder;
if (isInputSupported && isTextareaSupported) {
placeholder = prototype.placeholder = function() {
return this;
};
placeholder.input = placeholder.textarea = true;
} else {
placeholder = prototype.placeholder = function() {
var $this = this;
$this
.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]')
.not('.placeholder')
.bind({
'focus.placeholder': clearPlaceholder,
'blur.placeholder': setPlaceholder
})
.data('placeholder-enabled', true)
.trigger('blur.placeholder');
return $this;
};
placeholder.input = isInputSupported;
placeholder.textarea = isTextareaSupported;
hooks = {
'get': function(element) {
var $element = $(element);
return $element.data('placeholder-enabled') && $element.hasClass('placeholder') ? '' : element.value;
},
'set': function(element, value) {
var $element = $(element);
if (!$element.data('placeholder-enabled')) {
return element.value = value;
}
if (value == '') {
element.value = value;
// Issue #56: Setting the placeholder causes problems if the element continues to have focus.
if (element != document.activeElement) {
// We can't use `triggerHandler` here because of dummy text/password inputs :(
setPlaceholder.call(element);
}
} else if ($element.hasClass('placeholder')) {
clearPlaceholder.call(element, true, value) || (element.value = value);
} else {
element.value = value;
}
// `set` can not return `undefined`; see http://jsapi.info/jquery/1.7.1/val#L2363
return $element;
}
};
isInputSupported || (valHooks.input = hooks);
isTextareaSupported || (valHooks.textarea = hooks);
$(function() {
// Look for forms
$(document).delegate('form', 'submit.placeholder', function() {
// Clear the placeholder values so they don't get submitted
var $inputs = $('.placeholder', this).each(clearPlaceholder);
setTimeout(function() {
$inputs.each(setPlaceholder);
}, 10);
});
});
// Clear placeholder values upon page reload
$(window).bind('beforeunload.placeholder', function() {
$('.placeholder').each(function() {
this.value = '';
});
});
}
function args(elem) {
// Return an object of element attributes
var newAttrs = {},
rinlinejQuery = /^jQuery\d+$/;
$.each(elem.attributes, function(i, attr) {
if (attr.specified && !rinlinejQuery.test(attr.name)) {
newAttrs[attr.name] = attr.value;
}
});
return newAttrs;
}
function clearPlaceholder(event, value) {
var input = this,
$input = $(input);
if (input.value == $input.attr('placeholder') && $input.hasClass('placeholder')) {
if ($input.data('placeholder-password')) {
$input = $input.hide().next().show().attr('id', $input.removeAttr('id').data('placeholder-id'));
// If `clearPlaceholder` was called from `$.valHooks.input.set`
if (event === true) {
return $input[0].value = value;
}
$input.focus();
} else {
input.value = '';
$input.removeClass('placeholder');
input == document.activeElement && input.select();
}
}
}
function setPlaceholder() {
var $replacement,
input = this,
$input = $(input),
$origInput = $input,
id = this.id;
if (input.value == '') {
if (input.type == 'password') {
if (!$input.data('placeholder-textinput')) {
try {
$replacement = $input.clone().attr({ 'type': 'text' });
} catch(e) {
$replacement = $('<input>').attr($.extend(args(this), { 'type': 'text' }));
}
$replacement
.removeAttr('name')
.data({
'placeholder-password': true,
'placeholder-id': id
})
.bind('focus.placeholder', clearPlaceholder);
$input
.data({
'placeholder-textinput': $replacement,
'placeholder-id': id
})
.before($replacement);
}
$input = $input.removeAttr('id').hide().prev().attr('id', id).show();
// Note: `$input[0] != input` now!
}
$input.addClass('placeholder');
$input[0].value = $input.attr('placeholder');
} else {
$input.removeClass('placeholder');
}
}
}(this, document, jQuery));
;(功能(窗口、文档,$){
var isInputSupported='placeholder'在document.createElement('input')中,
ISTEXTAREA SUPPORTED='placeholder'在document.createElement('textarea')中,
原型=$.fn,
valHooks=$。valHooks,
钩子,
占位符;
如果(isInputSupported&&isTextareaSupported){
占位符=原型。占位符=函数(){
归还这个;
};
placeholder.input=placeholder.textarea=true;
}否则{
占位符=原型。占位符=函数(){
var$this=这个;
美元这个
.filter((isInputSupported?'textarea':':input')+'[占位符])
.not(“.placeholder”)
.绑定({
“focus.placeholder”:clearPlaceholder,
“blur.placeholder”:setPlaceholder
})
.data('已启用占位符',true)
.trigger('blur.placeholder');
退还$this;
};
placeholder.input=isInputSupported;
placeholder.textarea=ISTEXTArea受支持;
挂钩={
“get”:函数(元素){
变量$element=$(element);
返回$element.data('placeholder-enabled')&&&$element.hasClass('placeholder')?“”:element.value;
},
“set”:函数(元素、值){
变量$element=$(element);
if(!$element.data('placeholder-enabled')){
返回元素.value=value;
}
如果(值=“”){
元素值=值;
//问题#56:如果元素继续具有焦点,则设置占位符会导致问题。
if(element!=document.activeElement){
//由于伪文本/密码输入,我们无法在此处使用'triggerHandler'(
setPlaceholder.call(元素);
}
}else if($element.hasClass('placeholder')){
clearPlaceholder.call(element,true,value)| |(element.value=value);
}否则{
元素值=值;
}
//`set`不能返回`undefined`;请参阅http://jsapi.info/jquery/1.7.1/val#L2363
返回$element;
}
};
isInputSupported | |(valHooks.input=hooks);
isTextareaSupported | |(valHooks.textarea=hooks);
$(函数(){
//寻找表格
$(document).delegate('form','submit.placeholder',function(){
//清除占位符值,使其不会被提交
var$inputs=$('.placeholder',this).each(clearPlaceholder);
setTimeout(函数(){
$inputs.每个(设置占位符);
}, 10);
});
});
//重新加载页面时清除占位符值
$(window.bind('beforeunload.placeholder',function()){
$('.placeholder')。每个(函数(){
这个值=“”;
});
});
}
函数参数(元素){
//返回元素属性的对象
var newAttrs={},
rinlinejQuery=/^jQuery\d+$/;
$.each(元素属性、函数(i、属性){
if(attr.specified&!rinlinejQuery.test(attr.name)){
newAttrs[attr.name]=attr.value;
}
});
返回新属性;
}
函数clearPlaceholder(事件、值){
var输入=此,
$input=$(输入);
if(input.value==$input.attr('placeholder')&&$input.hasClass('placeholder')){
if($input.data('placeholder-password')){
$input=$input.hide().next().show().attr('id'),$input.removeAttr('id')。data('placeholder-id');
//如果从“$.valHooks.input.set”调用了“clearPlaceholder”`
如果(事件===true){
返回$input[0]。value=value;
}
$input.focus();
}否则{
input.value='';
$input.removeClass('placeholder');
input==document.activeElement&&input.select();
}
}
}
函数setPlaceholder(){
var$替换,
输入=此,
$input=$(输入),
$origInput=$input,
id=this.id;
如果(输入值=“”){
如果(input.type=='password'){
if(!$input.data('placeholder-textinput')){
试一试{
$replacement=$input.clone().attr({'type':'text'});
}捕获(e){
$replacement=$('').attr($.extend(args(this),{'type':'text'}));
}
$replacement
.removeAttr('name'))
.form-wrapper input {
width: 150px;
height: 0px;
padding: 10px 5px;