0
我有这个网页：http://tecnifarm.com/contacto.php带有一个在Firefox和Safari中非常完美的联系表单，但在Chrome上无法正常工作。 1.邮箱是向右移动的几个像素。 2.即使我在完成输入屏蔽后包含http://meyerweb.com/的reset.css，背景色也会从#FFF变为黄色。 3.如果我填写邮件输入屏蔽，出现错误框，如果我没有完成，它只是用我不知道从哪里来的颜色改变框的边框。Chrome中的表单存在的问题
这是德形式：
<link href="reset.css" type="text/css" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
<link href="formValidar/formValidar.css" type="text/css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link rel="image_src" href="img/logo.png"/>
<link href="img/favicon.ico" rel="shortcut icon">
<script type="text/javascript" src="formValidar/formValidar.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="web" method="POST" action="mail.php">
<div class="campos">
<label class="tituloform" for="nombre">
</label>
<input name="nombre" class="ss-q-short" id="formNombre" type="text" value="NOMBRE COMPLETO" onFocus="this.value = this.value=='NOMBRE COMPLETO'?'':this.value;" onBlur="this.value = this.value==''?'NOMBRE COMPLETO':this.value;">
<label class="tituloform" for="telefono">
</label>
<input name="telefono" class="ss-q-short" id="formTelefono" type="text" value="TELEFONO" onFocus="this.value = this.value=='TELEFONO'?'':this.value;" onBlur="this.value = this.value==''?'TELEFONO':this.value;">
<label class="tituloform" for="email">
</label>
<input name="email" class="ss-q-short" id="formEmail" type="email" value="MAIL" onFocus="this.value = this.value=='MAIL'?'':this.value;" onBlur="this.value = this.value==''?'MAIL':this.value;">
<label class="tituloform" for="asunto">
</label>
<input name="asunto" class="ss-q-short" id="formAsunto" type="text" value="ASUNTO" onFocus="this.value = this.value=='ASUNTO'?'':this.value;" onBlur="this.value = this.value==''?'ASUNTO':this.value;">
<label class="tituloform" for="mensaje">
</label>
<textarea name="mensaje" class="ss-q-short" id="formMensaje" form="web" value="MENSAJE" onFocus="this.value = this.value=='MENSAJE'?'':this.value;" onBlur="this.value = this.value==''?'MENSAJE':this.value;"></textarea>
</div>
<div id="webFormResult"></div>
<div>
<p>
<input type="submit" value="ENVIAR" class="submit" name"submit"/>
</p>
</div>
</form>
<script type="text/javascript" src="global.js"></script>
这是FormValidar.js
function formValidar(form, definitions) {
form.find('input, textarea, select').removeClass('errorMsgBorder');
$('.msgError').remove();
var camposErrorTitle = new Array();
var camposErrorId = new Array();
var definitionsLength = definitions.length;
var i = 0;
while(i<definitionsLength) {
var id = definitions[i].id;
var field = $('#'+id);
var errorFound = false;
switch (definitions[i].type) {
case 'string':
if(field.val() == '') {
errorFound = true;
}
if(typeof(definitions[i].minChar) != 'undefined' && field.val() != '') {
if(field.val().length < definitions[i].minChar) {
errorFound = true;
}
}
break;
case 'int':
if(field.val() == '') {
errorFound = true;
}
if(parseInt(field.val()) == 'NaN') {
errorFound = true;
} else {
if(typeof(definitions[i].minValue) != 'undefined') {
if(parseInt(field.val()) < definitions[i].minValue) {
errorFound = true;
}
}
if(typeof(definitions[i].maxValue) != 'undefined') {
if(parseInt(field.val()) > definitions[i].maxValue) {
errorFound = true;
}
}
}
break;
case 'float':
if(field.val() == '') {
errorFound = true;
}
if(parseFloat(field.val()) == 'NaN') {
errorFound = true;
} else {
if(typeof(definitions[i].minValue) != 'undefined') {
if(parseFloat(field.val()) < definitions[i].minValue) {
errorFound = true;
}
}
if(typeof(definitions[i].maxValue) != 'undefined') {
if(parseFloat(field.val()) > definitions[i].maxValue) {
errorFound = true;
}
}
}
break;
case 'email':
var regex = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if(regex.test(field.val()) == false || field.val() == '') {
errorFound = true;
}
break;
case 'radio':
var radioFields = $('[name="'+id+'"]');
var radioFieldsId = new Array();
var radioFieldBool = false;
radioFields.each(function(){
if($(this).prop('checked') == true) {
radioFieldBool = true;
}
radioFieldsId.push($(this).attr('id'));
});
if(radioFieldBool == false) {
errorFound = true;
for(f=0;f<radioFieldsId.length;f++) {
if(typeof(definitions[i].showErrorOn) != 'undefined') {
camposErrorId.push($('.'+definitions[i].showErrorOn));
} else {
camposErrorId.push($('label[for="'+radioFieldsId[f]+'"]'));
}
}
}
break;
}
if(errorFound == true) {
camposErrorTitle.push(definitions[i].title);
if(definitions[i].type != 'radio') {
if(typeof(definitions[i].showErrorOn) != 'undefined') {
camposErrorId.push($('#'+definitions[i].showErrorOn));
} else {
camposErrorId.push(field);
}
} else {
radioFieldsId = null;
}
errorFound = false;
}
i++;
}
if(camposErrorId.length > 0) {
var errorTexto = "Por favor, completa los siguientes campos: "+camposErrorTitle.join(', ');
form.find('input.submit').before('<div class="msgInline msgError">'+errorTexto+'</div>');
for(i=0;i<camposErrorId.length;i++) {
camposErrorId[i].addClass('errorMsgBorder');
}
errorPos = camposErrorId[0].offset();
if(errorPos == null) { errorPos = 0; }
errorPos = parseInt(errorPos.top) - 100;
$('html,body').animate({
'scrollTop': errorPos+"px"
}, 800, 'swing');
return false;
} else {
return true;
}
}
这是formvalidar.ccs
div.msg {
margin: 14px 0 8px;
padding: 10px;
text-shadow: 0 1px 0 #FFF;
}
div.contenidoHome div.msg {
width: 300px;
margin: 14px auto 8px;
}
div.msgInline {
margin: 0px 0px 8px;
padding: 10px;
text-shadow: 0 1px 0 #FFF;
width:479px;
}
div.msgSuccess {
border: 1px solid #FFF;
background-color: transparent;
}
div.msgError {
border: 1px solid #FFF;
background-color: transparent;
color: #222;
}
.errorMsgBorder {
border-width: 1px;
border-style: solid;
border-color: #f00;
}
这是mail.php
<?php
$header = 'From: [email protected]' . "\r\n" .
'Reply-To: '.$_POST["email"]. "\r\n" .
'X-Mailer: PHP/' . phpversion();
$msg = '';
foreach($_POST as $k => $v) {
$msg .= "$k: $v \n";
}
$res = mail('[email protected]', 'Contacto desde web', $msg, $header);
header('Content-type: text/json');
$res = true;
echo json_encode(array('result' => $res));
?>
这是global.js
$(document).ready(function(){
$('form#web').submit(function(){
var definitions = [
{
id: 'formNombre',
type: 'string',
title: 'nombre'
},
{
id: 'formEmail',
type: 'email',
title: 'email'
},
{
id: 'formAsunto',
type: 'string',
title: 'asunto'
},
{
id: 'formMensaje',
type: 'string',
title: 'mensaje'
}
];
if(formValidar($(this), definitions)) {
console.log($(this));
$.post('mail.php', $(this).serialize(), function(json){
if(json.result == true) {
$('#webFormResult').html('El mensaje se ha enviado correctamente');
} else {
$('#webFormResult').html('No pudimos enviar el mensaje, intente nuevamente');
}
$("#web input[type=text],#web input[type=email], #web input[type=number], #web textarea, #web select").val('');
});
return false;
} else {
return false;
}
});
});
如果有别的，它需要的请让我知道，感谢您的帮助的东西！
没有真正与问题相关，但 - 例如在onBlur和onFocus上嵌入JavaScript被认为是不好的做法。 – splig 2014-08-27 15:54:36
@splig这是我学习如何做到这一点的方式，你有更“正确”的做法吗？ – lalalamai 2014-08-27 16:02:02
嗨@lalalamai-第一阶段或重构将做类似于onBlue =“myJavaScriptFunction”的地方，其中myJavaScriptFunction封装您的行为，第二个（现代）是“不显眼的”JavaScript，其中您根本没有引用事件处理程序标记 - 你在DOM渲染后附加它们 - 看看这篇文章：http://en.wikipedia.org/wiki/Unobtrusive_JavaScript – splig 2014-08-28 09:28:28