Question

基本上我知道我的问题，但我不知道如何重新编写它以使其正常工作。

我在输入字段的左侧有图标。图标是用背景图像创建的。

我也对输入字段进行了验证。验证错误时，输入字段会将背景更改为红色。它还会删除图标。如何重写代码以便后台更改，而且图标会保留在那里？

我想让图标停留在原处。

$ cd C:\RailsInstaller\Ruby2.2.0\lib\ruby\gems\2.2.0\gems\bcrypt-3.1.10-x86-mingw32\ext\mri  
$ ruby extconf.rb
$ C:\<DevKit Path>\devkitvars.bat  (assuming you have devkit installed)(Ran this instead of running "make" because it was not recognized as an internal or external command)
$ make install

$('#fname').blur(function(e) {
  if (validatefname('fname')) {
    $('#fname').css('background', '#e6f3d1');
  }
  else {
    $('#fname').css('background', '#ffa5a5');
  }
});

function validatefname(fname) {
  var a = document.getElementById(fname).value;
  var filter = (/^([a-zA-Z-+ ]+){3,}$/);
  if (filter.test(a)) {
    return true;
  }
  else {
    return false;
  }
}

div#first {
  max-width: 400px;
  height:auto;
  margin: 50px auto 0; 
  padding: 20px 25px; 
  background-color: #FFF;
  color: 	#333333;
  border: 2px solid #EEE; 
  border-radius: 5px; 
}

.form {
  text-align: center;
}

input#fname { 
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4d/8ball_20x20px.jpg');
  background-repeat: no-repeat;
  background-position: 6px;
  border: 1px solid #DADADA;
  margin: 5px 0;
  padding-left: 35px;
  width: 80%;
  height: 30px; 
  font-size: 14px;
  border-radius: 5px;
  -webkit-border-radius: 5px;	/* for I.E */
  -moz-border-radius: 5px; 	/* for Mozilla web browser*/
}

以下是<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="first"> <div class="form"> <input type="text" placeholder="First Name" id="fname" name="name" required="required" maxlength="45"> </div> </div> LINK

Answer 1

这实际上很容易解决。而不是设置背景＆＃39;在你的jquery中，设置背景颜色＆＃39;像这样：

＆＃13;

$('#fname').blur(function(e) {
        if (validatefname('fname')) {
  $('#fname').css('background-color', '#e6f3d1');
        }
        else {
            $('#fname').css('background-color', '#ffa5a5');
        }
    });
    
    function validatefname(fname) {
    var a = document.getElementById(fname).value;
 var filter = (/^([a-zA-Z-+ ]+){3,}$/);
    if (filter.test(a)) {
        return true;
    }
    else {
        return false;
    }
}

＆＃13;

div#first {
	max-width: 400px;
	height:auto;
	margin: 50px auto 0; 
	padding: 20px 25px; 
	background-color: #FFF;
	color: 	#333333;
	border: 2px solid #EEE; 
	border-radius: 5px; 
}

.form {
	text-align: center;
}

input#fname { 
	background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4d/8ball_20x20px.jpg');
	background-repeat: no-repeat;
	background-position: 6px;
	border: 1px solid #DADADA;
	margin: 5px 0;
	padding-left: 35px;
	width: 80%;
	height: 30px; 
	font-size: 14px;
    border-radius: 5px;
	-webkit-border-radius: 5px;	/* for I.E */
	-moz-border-radius: 5px; 	/* for Mozilla web browser*/
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">

			<div class="form">
			  
				  <input type="text" placeholder="First Name" id="fname" name="name" required="required" maxlength="45">

			</div>

</div>

＆＃13;

Answer 2

替换它：

$('#fname').css('background', '#e6f3d1');

用这个：

$('#fname').css('background-color', '#e6f3d1');

图像消失，因为背景css样式会覆盖background- *样式（如果稍后修改它）。

Answer 3

只需使用background-color代替background

  if (validatefname('fname')) {
      $('#fname').css('background-color', '#e6f3d1');
   }
    else {

      $('#fname').css('background-color', '#ffa5a5');
   }

Working Fiddle

Answer 4

您已经替换了完整的背景，但您只想替换颜色：

    if (validatefname('fname')) {
      $('#fname').css('background-color', '#e6f3d1');
    } else {
      $('#fname').css('background-color', '#ffa5a5');
    }

更新了小提琴：https://jsfiddle.net/jkdbvpbn/1/

Answer 5

使用background-color css属性仅设置背景颜色

$('#fname').blur(function(e) {
        if (validatefname('fname')) {
  $('#fname').css('background-color', '#e6f3d1');
        }
        else {
            $('#fname').css('background-color', '#ffa5a5');
        }
    });

Answer 6

在您的JQ中使用background-color代替background

仅使用background会覆盖您在CSS中初始设置的所有背景属性

点击下面的链接查看结果。让我知道它是否有效。

＆＃13;

$('#fname').blur(function(e) {
        if (validatefname('fname')) {
  $('#fname').css('background-color', '#e6f3d1');
        }
        else {
            $('#fname').css('background-color', '#ffa5a5');
        }
    });
    
    function validatefname(fname) {
    var a = document.getElementById(fname).value;
 var filter = (/^([a-zA-Z-+ ]+){3,}$/);
    if (filter.test(a)) {
        return true;
    }
    else {
        return false;
    }
}

＆＃13;

div#first {
	max-width: 400px;
	height:auto;
	margin: 50px auto 0; 
	padding: 20px 25px; 
	background-color: #FFF;
	color: 	#333333;
	border: 2px solid #EEE; 
	border-radius: 5px; 
}

.form {
	text-align: center;
}

input#fname { 
	background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4d/8ball_20x20px.jpg');
	background-repeat: no-repeat;
	background-position: 6px;

	border: 1px solid #DADADA;
	margin: 5px 0;
	padding-left: 35px;
	width: 80%;
	height: 30px; 
	font-size: 14px;
    border-radius: 5px;
	-webkit-border-radius: 5px;	/* for I.E */
	-moz-border-radius: 5px; 	/* for Mozilla web browser*/
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">

			<div class="form">
			  
				  <input type="text" placeholder="First Name" id="fname" name="name" required="required" maxlength="45">

			</div>

</div>

＆＃13;

Answer 7

快速解决方案是使用边框instaed的背景颜色，试试这个

$('#fname').css('border', '2px solid red');

HERE是小提琴

Answer 8

而不是：

background: rgb(255, 165, 165);

使用

background-color: rgb(255, 165, 165);

Answer 9

您正在更改背景属性，但您想要仅使用背景颜色属性。

$('#fname').css('background-color', '#e6f3d1');

Answer 10

我认为它正在覆盖背景。尝试$('#fname').css('background',...到$('#fname').css('background-color',

Answer 11

尝试创建2个类css

.red{
background:'red';
background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4d/8ball_20x20px.jpg');
background-repeat: no-repeat;
background-position: 6px;
}

.green{
background:'green';
background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4d/8ball_20x20px.jpg');
background-repeat: no-repeat;
background-position: 6px;
}

你的js代码将是：

$('#fname').blur(function(e) {
        if (validatefname('fname')) {
  $('#fname').removeClass('red')addClass('green');
        }
        else {
  $('#fname').removeClass('green').addClass('red');
        }
    });

验证后输入图标消失

11 个答案: