Question

我有一个文本框，用于输入任何要搜索的单词，然后单击旁边的按钮。

<input id="EnterText" class="lightcolor" type="text" size="50" value="Enter text" maxlength="50" name="EnterText">
<input id="ClickButton" type="image" value="Button" name="ClickButton" onclick="" src="">

由于我来自前端，我想到了一个良好的用户体验设计，并以浅色输入了一些文本Enter text，当焦点事件发生时应该更改类，并在返回时返回模糊事件发生。因此，我为它写了jQuery。

$(document).ready(function () {
    $('#EnterText').focusin(function () {
        alert("focus in");
        var res = document.getElementById("EnterText");
        document.getElementById("EnterText").value = "";
        res.setAttribute("class", "afterClick");
    });
    $('#EnterText').focusout(function () {
        alert("focus out");
        var res = document.getElementById("EnterText");
        document.getElementById("EnterText").value = "Enter Text";
        res.setAttribute("class", "lightcolor");
    });
    $('ClickButton').click(function () {
        alert("Click Button")
    });
});

正如您所看到的，我已经尝试了focusin，focus，blur和focusout，但是当我点击时，我无法完成所需的操作按钮focusout事件被触发。实际上，ClickButton的警报从未出现过。因此，我无法实现此focusout和focusin，我的想法现在成了一个要求。我还注意到，当我点击文本框焦点输出事件的那一刻首先被调用然后聚焦。我只需要一个文本框，它应该有一些内容指导用户，当他点击时他会输入值并点击该按钮使得后端人员在获得此值后将会处理其余的事情。

Answer 1

您可以使用jQuery和更漂亮的代码轻松完成。

检查一下： http://jsfiddle.net/webtiago/7BAyV/

Answer 2

您应该考虑使用占位符属性而不是不必要的javascript。

示例：

http://jsfiddle.net/FdKYW/1/

聚焦用于文本框的问题

2 个答案: