TextBox轮廓被覆盖

所以我有一个小问题，我不明白它为什么这样做。我有一个文本框，它使用JavaScript进行客户端验证，并使用C＃进行服务器端验证，所以您可以从下面的屏幕截图中看到，我已经完成了一些服务器端验证，因此当用户点击注册时没有超过6在文本框中输入的字符，文本框会再有一个红色的轮廓：TextBox轮廓被覆盖

When the user hasn't entered anything 然而，因为我也有一个客户端验证的JavaScript，在超过6个字符的用户类型的文本框应该有一个绿色的轮廓，这下面的屏幕截图演示了它的功能，但服务器端验证文本框轮廓仍然保留在底下，因此您仍然可以在绿色下看到红色轮廓：

Client side validation

我只是不明白为什么会发生这种情况，据我所知大纲属性是相同的每个文本框，为什么要创建新的轮廓？

这是我的客户端验证（javascipt的）代码：

function checkPassword(password) 
{ 
    password_txt = document.getElementById('<%= password_txt.ClientID %>'); 
    if (password == '') 
    { 
     password_lbl.innerHTML = 'Password must be at least 6 characters'; 
     password_lbl.style.color = "red"; 
     password_txt.style.outline = "1px solid red" 
     //register_btn.disabled = true; 
     passwordCheck = false; 
    } 
    else 
    { 
     password_lbl.innerHTML = 'Perfect!'; 
     password_lbl.style.color = "green"; 
     password_txt.style.outline = "1px solid green" 
     //register_btn.disabled = true; 
    }

的checkPassword使用的文本框keyUp事件调用的。现在这是服务器端验证：

if (password_txt.Text == "") 
{ 
    password_lbl.Text = "Password must be at least 6 characters"; 
    password_lbl.ForeColor = System.Drawing.Color.Red; 
    password_txt.BorderColor = System.Drawing.Color.Red; 
    password_txt.BorderWidth = 1; 
    password_txt.BorderStyle = System.Web.UI.WebControls.BorderStyle.Solid; 
    register_btn.Enabled = false; 
} 
else 
{ 
    password_lbl.Text = "Perfect!"; 
    password_lbl.ForeColor = System.Drawing.Color.Green; 
    password_txt.BorderColor = System.Drawing.Color.Green; 
    password_txt.BorderWidth = 1; 
    password_txt.BorderStyle = System.Web.UI.WebControls.BorderStyle.Solid; 
    register_btn.Enabled = false; 
    passwordCheck = true; 
}

这是使用OnClick调用的。

有没有人明白为什么它的表演是这样的？

来源

2015-07-20 mogorilla

您也可以尝试设置前清除'.outline'财产它在绿色'.outline =“0px”''之前'.outline =“1px纯绿色' – TestWell

@musefan完美的工作！我仍然不明白为什么它不同于轮廓 – mogorilla

问题是，您正在设置服务器代码的“边框”，但使用JS设置“大纲”。这些不是一回事，所以它不会覆盖风格。

在JavaScript，请改变：

password_txt.style.outline = "1px solid red"

这样：

password_txt.style.border = "1px solid red";

Here is an example，显示它们的区别

来源

2015-07-20 15:17:06 musefan

那么基本上从你的例子来看，轮廓是围绕边框而不是文本框本身的东西？ – mogorilla

[From here]（http://www.w3schools.com/css/css_outline.asp）：轮廓是围绕元素（**在边界**之外）绘制的线条，使元素“脱颖而出” 。 – musefan

TextBox轮廓被覆盖

回答

相关问题