Question

点击文本字段周围的按钮设置边框为红色。

Name <input type="text" class="one" id="name"> 
<input type="button" value="OK" >

我知道边框的样式是

.one {
border-style:solid;
border-color:#0000ff;
}

如果点击按钮后该字段名称为空，我想将边框设置为红色。我可以用php制作它还是我必须在点击时使用java脚本和事件？

Answer 1

如果您希望text元素动态更改颜色（在运行时），则需要使用Javascript。如果您希望元素由于表单操作（回发）而更改颜色，那么您可以更改由PHP回发生成的标记。但根据您的问题以及这是2014年的事实，您可能正在寻找JS解决方案。

您可以使用PHP生成JavaScript脚本，但不能使用PHP来处理鼠标单击事件。

为此，使用纯Javascript，您可以编写如下内容：

 <input type="button" value="OK" onclick="document.getElementById('name').className = 'one'; ">

Answer 2

你必须使用JavaScript。您应该在单击文本框时调用JavaScript函数，并在单击按钮时添加类，因此在通过JavaScript添加类时应用CSS。您在函数中所要做的就是检查文本框是否为空，这样就可以添加其他类跳过。

Answer 3

只需PHP即可。您需要将表单代码更改为

<form method = "POST" action = "this.php">
Name <input type="text" class="one" id="name"> 
<input type="submit" value="OK" >
</form>

然后重新加载页面。在创建表单元素之前，您将通过if语句，无论表单是否应为红色。如果表单中包含数据（查看isset函数），并且数据采用您请求的格式，则使用旧输入重新创建表单。如果输入无效，请为其指定红色边框。

虽然使用javascript可能更简单。

编辑：它有点难看。我现在无法测试PHP，但这个HTML似乎有效：

<form method = "POST">
<div class = "somediv">
    <input type="text" class="one" id="name" name = "aname"/> 
    <input type="button" value="OK" />
</div>

<div class = "anotherdiv">
    <input type="text" class="one" id="name" name = "anothername"/> 
    <input type="button" value="OK" />   
</div>
<input type = "submit" value = "Submit" name ="OK"/>
</form>

Answer 4

要通过单击按钮更改文本框属性，您需要使用Javascript。在按钮中添加一个事件，这样我们就可以检查文本框的值。

Html

Name : <input type="text" id="name">
<input type="button" value="OK" onclick="checkVal()">

<强> JavaScript的：

function checkVal() {
 var name = document.getElementById("name"), value = name.value;
 var classes = name.className;    
 if (value.replace(/\s/g, "") === "") {
   name.className = classes+" one";
 }
 else {
   if (classes.indexOf("one") !== -1) {name.className = classes.repalce(/one/g, '')}
 }
}

Answer 5

我建议您使用required="required"中text-field的最佳方式。

像这样：

<input type="text" name="textFieldName" required="required" placeholder="sampleValue" />

在这种情况下，当提交表单并且需要该字段时，浏览器将识别出它是空的并且会自动将其边框设置为红色，并且如果您使用的是Firefox，则说明此字段是必需的。否则，在Chrome上会弹出一条消息，说明此字段是必需的。

试一试，祝你好运！

如果字段为空，则将边框设置为红色

5 个答案: