Question

我正试图在聚焦时放大文本框

相关的html代码是

<input class="tbox" name="q" type="text" />

由于tbox是页面中每个文本框的标记，我必须使用该名称。

我试过这个javascript

window.onload = init();
function init()
{
    var arr = new Array();
    arr = document.getElementsByName("q");
    var querybox = arr[0];
    querybox.addEventListener('onfocus', wasclicked, false);
    querybox.addEventListener('onblur', lostfocus, false);
}

function wasclicked(form)
{
    form.q.style['width'] = '500px';
}
    function lostfocus(form)
{
    form.q.style['width'] = '276px';
}

调试控制台告诉我，我不能在undefined上使用addEventListener。

我不熟悉javascript，所以我尝试了[0] .value也无济于事。

Answer 1

有几个不同的问题。首先，你需要使用：

window.onload = init;   // assign function reference to .onload to call later

而不是：

window.onload = init();   // calls init() immediately and assigns return value to .onload

这是一个非常常见的JS错误。您拥有它的方式是，您立即（在页面加载之前）调用init()并将其返回值分配给window.onload，这将无效。

您想为window.onload分配一个功能参考。函数引用是函数的名称，后面没有任何parens。添加parens指示JS解释器现在执行函数。只分配名称会将指向函数的指针放入window.onload，以便稍后在onload事件触发时调用它。

您还必须修复事件处理程序回调，因为form不是传递给它们的内容。事件处理程序的参数是Event对象。导致该事件的对象将位于this或event.target：

function wasclicked(e) {
    this.style.width = '500px';
}

function lostfocus(e) {
    this.style.width = '276px';
}

而且，事件名称是“模糊”和“焦点”，所以你需要改变它：

querybox.addEventListener('onfocus', wasclicked, false);
querybox.addEventListener('onblur', lostfocus, flase);

到此：

querybox.addEventListener('focus', wasclicked, false);
querybox.addEventListener('blur', lostfocus, flase);

将所有内容组合在一起并进行一些简化，整个过程应该如下所示：

window.onload = init;

function init() {
    var querybox = document.getElementsByName("q")[0];
    querybox.addEventListener('focus', wasclicked, false);
    querybox.addEventListener('blur', lostfocus, false);
}

function wasclicked(e) {
    this.style.width = '500px';
}

function lostfocus(e) {
    this.style.width = '276px';
}

Answer 2

试试这个：

window.onload = init();
function init()
{
    var arr = document.getElementsByName("q");
    var querybox = arr[0];
    querybox.addEventListener('onfocus', wasclicked, false);
    querybox.addEventListener('onblur', lostfocus, flase);
}
function wasclicked(form)
{
    form.q.style['width'] = '500px';
}
    function lostfocus(form)
{
    form.q.style['width'] = '276px';
}

Answer 3

请注意，onfocus是事件处理程序，但事件本身为focus。

function init()
{
    arr = document.getElementsByName("q");

    var querybox = arr[0];
    querybox.addEventListener('focus', wasclicked, false);
    querybox.addEventListener('blur', lostfocus, false);
}

function wasclicked(e)
{
    e.target.style.width = '500px';
}
function lostfocus(e)
{
    e.target.style.width = '276px';
}
window.onload = init();

如您所见，事件本身包含elemet，因此无需添加任何其他变量。只需知道addEventHandler不适用于所有浏览器。

getElementsByName（'q'）[0]返回undefined

3 个答案: