Question

我在html里面创建了一个div，它创建了一个文本框并为其分配了一个背景图像，我想在该输入字段的背景图像上创建一个onclick事件。

＆＃13;

document.getElementsByClassName("textboxcss").onclick = function() {
    alert("Hello"); 
};

＆＃13;

.textboxcss {
    background-image: url("../images/sub.png");
    background-repeat: no-repeat;
    background-position: right;
    background-position: 8px 13px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
    <input class="textboxcss" id="default" type="text">
</div>

＆＃13;

我看到正确的图像...但我不能这样点击。还有其他办法吗？

Answer 1

更新了答案

请尝试querySelector()，

(function(){
    document.querySelector(".textboxcss").onclick = function () {
       alert("Hello!"); 
    };
}());

示例：https://jsfiddle.net/sj7n7eko/3/

如果您想使用getElementsByClassName() ，则必须遍历选择器元素并绑定onClick事件。因为getElementsByClassName（）返回Array。

(function(){

    var textInputs = document.getElementsByClassName("textboxcss");

    Array.prototype.forEach.call(textInputs, function () {
        this.onclick = function () { 
            alert("Hello!");
        };
    });

}());

示例：https://jsfiddle.net/sj7n7eko/5/

还注意到您在更新的问题中使用了jquery，

然后你可以简单地使用jQuery

$(".textboxcss").click(function(){
   alert("Hello!");
});

或如果您要动态添加元素，

$("body").on("click", ".textboxcss", function(){
   alert("Hello!");
});

Answer 2

应该工作......

function Alerta(table) 
{
   alert("Hello"); 
}

<div><input class="textboxcss" id="default" type="text" onclick="Alerta()">
</div>

注意：您可以更改启动JS功能的事件。 Onblur，Onfocus，...查看此列表List Events

Answer 3

getElementsByClassName()返回一个数组。所以你至少应该选择数组中的第一个元素。

 var elements = document.getElementsByClassName("textboxcss")

 // Assign click event
 elements[0].onclick= function () { 
    alert("Hello"); 
 };

Answer 4

我可以在这里看到一些设计问题，但针对您的问题，您可以通过输入元素的onfocus或onclick来实现。

(function() {
    // your page initialization code here
    // the DOM will be available here
    document.querySelector(".textboxcss").onfocus = function() {
        alert("Hello");
    };
})();

可替换地，

(function() {
    document.getElementsByClassName("textboxcss")[0].onfocus = function() {
        alert("Hello");
    };
})();

如果需要，可以绑定onclick事件，

(function() {
    document.getElementsByClassName("textboxcss")[0].onclick = function() {
        alert("Hello");
    };
})();

Demo JSFiddle

Answer 5

使用您想要在点击时指定的背景图像创建另一个类。然后点击添加另一个类（用！important 用css编写的背景图像）

Answer 6

您需要将.css类分别分配给后台。共享完整代码以更好地理解。

.imageControl {
background-image: url("../images/sub.png");
    background-repeat: no-repeat;
    background-position: right;
    background-position: 8px 13px;
}

HTML：

<div>
    <span class="imageControl"></span>
    <input id="default" type="text">
</div>

点击事件：

document.getElementByClassName("imageControl").addEventListener("click", function() {
// To-Do on click of background image
});

在css中的背景图像上的onclick事件？

6 个答案:

更新了答案

还注意到您在更新的问题中使用了jquery，