html - 带有点击事件的非javascript多行控件

Question

您好，我需要一个跨越多行并具有点击事件服务器端的链接。问题是它必须在没有 javascript 的情况下运行。

我尝试使用按钮并将其样式设置为看起来像链接。这工作正常，因为我正在使用该属性

white-space:normal

这使得文本跨越多行。

然而，当我在 IE6 中检查它时，文本不会换行。

有谁知道如何使用服务器端的 onclick 事件实现多文本行控件？

Answer 1

好的，我想出了一个解决方案。它依赖于一个事实 <label>元素将聚焦/触发它所附加的表单元素(输入、按钮)。事实证明，这也会触发按钮被点击。这意味着我们可以将标签用作按钮本身的可点击“代理”元素。然后可以隐藏该按钮。

我将按钮封装在标签内，并使按钮不可见，然后，可以根据您的喜好设置标签的样式 - 它是真正的内联元素，就像链接一样。

这是一个演示 - 如果您愿意，可以获取代码:http://www.spookandpuff.com/examples/buttonText.html

HTML:

<label for="buttonTest" class="buttonProxy">I'm a clickable proxy <button type="submit" id="buttonTest" class="proxied"></button></label>

CSS

button.proxied {
        width:0;
        height:0;
        opacity:0;
        position:absolute;
    }

    label.buttonProxy {
        text-decoration:underline;
        cursor:pointer;
        color:blue;
    }

请注意，较旧的 IE 不允许您与正确“隐藏”的表单元素进行交互:如果您 display:none或 visibility:hidden你的按钮，它不会工作。将宽度/高度设置为 0 将起作用，使用 IE 特定规则将不透明度设置为 0 也是如此。