当输入焦点时突出显示表单行

发布于 2024-09-03 00:53:34 字数 788 浏览 4 评论 0原文

我有以下一段 Mootools 1.11 代码（不可升级，因为这是在 Joomla 中），我想在其中的某个项目获得焦点时突出显示表单行。然而，这不起作用。我需要知道如何访问表单项的父 div。

window.addEvent('domready', function() {
    var list = $$('#ChronoContact_lensorder div.formrow');
    list.each(function(element) {

var fx = new Fx.Styles(element, {duration:200, wait:false});

element.addEvent('focus', function(){
    fx.start({
        'background-color': '#e6f0f2',
        color: '#FFF'
    });
});

element.addEvent('focus', function(){
    fx.start({
        'background-color': '#FFF',
        'color': '#2F9AD0'
    });
});

}); 
});

HTML 是：

<div class="formrow"> 
<label for="ud">Uncut Diameter:</label> 
<input type="text" id="ud" name="ud" /> 
</div>

谢谢

原文

I have the following piece of Mootools 1.11 code (not upgradable as this is within Joomla), which I want to highlight the form row, when an item within it is focussed. However, this doesn't work. I need to know how to access the parent div of the form item.

window.addEvent('domready', function() {
    var list = $('#ChronoContact_lensorder div.formrow');
    list.each(function(element) {

var fx = new Fx.Styles(element, {duration:200, wait:false});

element.addEvent('focus', function(){
    fx.start({
        'background-color': '#e6f0f2',
        color: '#FFF'
    });
});

element.addEvent('focus', function(){
    fx.start({
        'background-color': '#FFF',
        'color': '#2F9AD0'
    });
});

}); 
});

HTML is:

<div class="formrow"> 
<label for="ud">Uncut Diameter:</label> 
<input type="text" id="ud" name="ud" /> 
</div>

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空名 2024-09-10 00:53:34

您可能不想查找

，而是使用 var list = $$('#ChronoContact_lensorder 查找实际的 div.formrow input'); 然后在必要时使用 .getParent() 方法引用父级，如下所示：

window.addEvent('domready', function() {
    var list = $('#ChronoContact_lensorder div.formrow input');
    list.each(function(element) {

var fx = new Fx.Styles(element.getParent(), {duration:200, wait:false});

element.addEvent('focus', function(){
    fx.start({
        'background-color': '#e6f0f2',
        color: '#FFF'
    });
});

element.addEvent('blur', function(){
    fx.start({
        'background-color': '#FFF',
        'color': '#2F9AD0'
    });
});

}); 
});

未经测试的代码。请注意，第二个事件现在是 blur 而不是 focus，否则两个事件将同时触发，并且可能会恢复彼此的效果！

Instead of looking for the <div>s, you might want to look for the actual <input> using var list = $$('#ChronoContact_lensorder div.formrow input'); Then refer to the parent using the .getParent() method when necessary, like this:

window.addEvent('domready', function() {
    var list = $('#ChronoContact_lensorder div.formrow input');
    list.each(function(element) {

var fx = new Fx.Styles(element.getParent(), {duration:200, wait:false});

element.addEvent('focus', function(){
    fx.start({
        'background-color': '#e6f0f2',
        color: '#FFF'
    });
});

element.addEvent('blur', function(){
    fx.start({
        'background-color': '#FFF',
        'color': '#2F9AD0'
    });
});

}); 
});

Untested code. Note that the second event is now blur instead of focus, or else both events will fire at the same time and might revert each other's effects!

回复收藏 0 原文

~没有更多了~