在文本字段中输入时更改按钮值答案

【问题标题】：Change button value while entering in a textfield在文本字段中输入时更改按钮值
【发布时间】：2012-03-01 14:23:19
【问题描述】：

我有一个按钮（样式为带有 CSS 的按钮）。旁边是一个输入字段。我希望按钮值随着用户在文本字段中键入值而动态更改。最简单的方法是什么？

我的表格：

<form>
    <div class="span-3" id="bid_btns">
        <div id="bid_button">
            <a href=""><?php echo $somethingwhichshouldchange; ?></a>
        </div>
    </div>
    <div class="span-3 last" id="bid_btns">
        <div id="bid_field">
        <input type="text" class="title" name="bid_field" id="bid_field" maxlength="5"/>
        </div>
    </div>
</form>

【问题讨论】：

你不能只用 HTML 和 PHP 做到这一点；客户端脚本通常使用 Javascript 完成。

标签： php javascript html ajax button

【解决方案1】：

PHP 是一种服务器端语言，因此如果不重新提供页面，您将永远无法在本地更改变量。你需要研究 javascript 来做你正在做的事情。

【讨论】：

【解决方案2】：

如果您想在键入时更改按钮标签/值，PHP 将无济于事。您需要在浏览器中运行的脚本 - JavaScript。如果您使用 jQuery（您确实要求最简单的方法，而 jQuery 使这变得更简单），您需要一些代码来随着输入值的变化而更改按钮。

$(document).ready(function() {

    $("#bid_field").keyup(function(){
        $("#bid_btns").text($(this).val());
    });

});

这段代码会将#bid_btns 按钮内的html 更改为在#bid_field 输入中键入的任何内容。如果对 jQuery 不熟悉，可以阅读这篇文章了解更多：http://docs.jquery.com/How_jQuery_Works

注意 - 根据 BenM 的建议进行编辑。

【讨论】：

谢谢。我会对 jQuery 做更多的研究。
它真的很有用——我几乎用 jQuery 完全取代了 Flash。
使用html() 被认为是非常糟糕的做法，当您使用未经处理的用户输入时（例如这种情况） - 我可以通过在#bid_field 中输入 HTML 来轻松破坏布局。 .text() 在这里使用起来更安全。
我并没有考虑太多。您可以使用 FireBug 或类似工具在大多数浏览器中破坏 HTML，而无需任何脚本。现在，如果您要从数据库中提取内容，那么您有充分的理由使用 .text() 而不是 .html()。

【解决方案3】：

您可以使用 jQuery 来实现这一点。您只需要将函数绑定到onkeyup 事件：

http://jsfiddle.net/Vt6N9/

【讨论】：