jQuery 如何使用带有 jQ​​uery 的锚点设置文本框的值?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/295095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 08:54:03  来源:igfitidea点击:

How do I set a textbox's value using an anchor with jQuery?

jquery

提问by Kevin Pang

I have a textbox whose value I want to set based on the inner text of an anchor tag. In other words, when someone clicks on this anchor:

我有一个文本框,我想根据锚标记的内部文本设置其值。换句话说,当有人点击这个锚点时:

<a href="javascript:void();" class="clickable">Blah</a>

I want my textbox to populate with the text "Blah". Here is the code I am currently using:

我希望我的文本框填充文本“废话”。这是我目前使用的代码:

<script type="text/javascript">
    $(document).ready(function(){
        $("a.clickable").click(function(event){
            $("input#textbox").val($(this).html());
        });  
    });
</script>

And in my html there is a list of anchor tags with the class "clickable" and one textbox with the id "textbox".

在我的 html 中,有一个带有“可点击”类的锚标记列表和一个带有“文本框”ID 的文本框。

I've substituted the code above with code to just show a javascript alert with $(this).html() and it seems to show the correct value. I have also changed the $(this).html() to be a hardcoded string and it setes the textbox value correctly. But when I combine them the textbox simply clears out. What am I doing wrong?

我用代码替换了上面的代码,只显示一个带有 $(this).html() 的 javascript 警报,它似乎显示了正确的值。我还将 $(this).html() 更改为硬编码字符串,并正确设置文本框值。但是当我将它们组合起来时,文本框就会简单地清除掉。我究竟做错了什么?

回答by Falco Foxburr

I wrote this code snippet and it works fine:

我写了这个代码片段,它工作正常:

<a href="#" class="clickable">Blah</a>
<input id="textbox">
<script type="text/javascript">
    $(document).ready(function(){
        $("a.clickable").click(function(event){
            event.preventDefault();
            $("input#textbox").val($(this).html());
        });  
    });
</script>

Maybe you forgot to give a class name "clickable" to your links?

也许你忘了给你的链接一个“可点击”的类名?

回答by max

To assign value of a text box whose id is ёtextboxё in jQuery please do the following

要在jQuery中分配id为ёtextboxё的文本框的值,请执行以下操作

$("#textbox").val('Blah');

回答by redsquare

Just to note that prefixing the tagName in a selector is slower than just using the id. In your case jQuery will get all the inputs rather than just using the getElementById. Just use $('#textbox')

请注意,在选择器中添加 tagName 前缀比仅使用 id 慢。在您的情况下,jQuery 将获取所有输入,而不仅仅是使用 getElementById。只需使用 $('#textbox')

回答by redsquare

To assign value of a text box whose id is "textbox" in JQuery please do the following

要在 JQuery 中分配 id 为“textbox”的文本框的值,请执行以下操作

$("#textbox").get(0).value = "blah"

$("#textbox").get(0).value = "blah"

回答by Falco Foxburr

Following redsquare: You should not use in href attribute javascript code like "javascript:void();" - it is wrong. Better use for example href="#" and then in Your event handler as a last command: "return false;". And even better - use in href correct link - if user have javascript disabled, web browser follows the link - in this case Your webpage should reload with input filled with value of that link.

遵循 redsquare:你不应该在 href 属性中使用像“javascript:void();”这样的 javascript 代码 - 这是错误的。更好地使用例如 href="#" 然后在您的事件处理程序中作为最后一个命令:“return false;”。甚至更好 - 在 href 正确链接中使用 - 如果用户禁用了 javascript,Web 浏览器会跟随该链接 - 在这种情况下,您的网页应该使用填充了该链接值的输入重新加载。