文章/答案/技术大牛

发布

Jquery根据值选择textarea

jQuery根据值选择textarea

基础概念

在jQuery中，可以根据textarea元素的值(value)来选择和操作这些元素。这与通过ID、类名或其他属性选择元素类似，但需要特定的选择器和方法来处理元素的值。

实现方法

1. 使用`:contains()`选择器

// 选择包含特定文本的textarea
$('textarea:contains("特定文本")').css('background', 'yellow');

注意：:contains()选择器会匹配包含指定文本的所有元素，包括部分匹配。

2. 使用`.filter()`方法进行精确匹配

// 精确匹配textarea的值
$('textarea').filter(function() {
    return $(this).val() === "精确值";
}).css('border', '2px solid red');

3. 使用`.filter()`方法进行模糊匹配

// 模糊匹配textarea的值
$('textarea').filter(function() {
    return $(this).val().indexOf("部分文本") !== -1;
}).addClass('highlight');

4. 使用属性选择器（适用于初始值）

// 匹配设置了value属性的textarea（注意：这匹配的是初始值，不是当前值）
$('textarea[value="初始值"]').css('color', 'blue');

应用场景

表单验证：查找包含特定错误信息的textarea
动态样式：为包含特定内容的textarea添加特殊样式
内容过滤：在大量文本输入框中快速定位特定内容
自动完成：根据输入内容匹配相关textarea

注意事项

:contains()选择器对大小写敏感
使用.val()获取的是当前值，而[value]属性选择器匹配的是初始HTML属性值
对于大量元素，.filter()方法可能比:contains()更高效
如果要匹配正则表达式，可以在.filter()中使用正则测试

完整示例

<!DOCTYPE html>
<html>
<head>
    <title>jQuery根据值选择textarea示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .highlight {
            background-color: #ffeb3b;
        }
        .error {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <textarea id="text1">这是一段示例文本</textarea>
    <textarea id="text2">另一段文本</textarea>
    <textarea id="text3">示例</textarea>
    <textarea id="text4" value="初始值"></textarea>

    <script>
        $(document).ready(function() {
            // 1. 使用:contains选择包含"示例"的textarea
            $('textarea:contains("示例")').addClass('highlight');
            
            // 2. 精确匹配值为"另一段文本"的textarea
            $('textarea').filter(function() {
                return $(this).val() === "另一段文本";
            }).addClass('error');
            
            // 3. 匹配初始值属性
            $('textarea[value="初始值"]').css('color', 'green');
        });
    </script>
</body>
</html>

常见问题解决

问题1：选择器没有生效

原因：可能在DOM加载完成前执行了脚本
解决：确保代码在$(document).ready()中执行

问题2：:contains()匹配了不需要的元素

原因：:contains()是部分匹配
解决：改用.filter()进行精确匹配

问题3：[value]选择器不起作用

原因：它只匹配初始HTML属性，不反映用户输入的变化
解决：使用.val()获取当前值进行匹配

页面内容是否对你有帮助？

有帮助

没帮助

jQueryUI可排序-取消-属性导致无法编辑输入

、、、、

我在版本1.12.1中使用jquery-3.2.1.min.js和jquery-ui.min.js </ul> <li>last<input value="5" /></li> </ul

浏览 5提问于2017-09-14得票数 1

1回答

TinyMCE按父窗体ID选择文本区域

、、

我在看<form id="edit_page"><form> 我知道我可以向文本区域添加一个类来让它工作，但我希望这个解决方案适用于我的用例。

浏览 0提问于2016-02-02得票数 0

1回答

如何根据JQuery数据中重新生成的数据在默认情况下选择下拉值

、、

默认情况下，我希望根据JQuery数据表中返回的数据选择下拉值。render": function(data, type, full, meta) { return '<textareaname="comments" rows="2" cols="25" maxlength="2000"

浏览 1提问于2020-01-10得票数 0

2回答

基于多种条件的Jquery显示/隐藏元素

、

当textarea不为空时，我试图根据下拉和中的选择值禁用按钮元素。因此，当用户从下拉列表中选择拒绝时，他们还必须填充textarea输入，否则他们无法更新(按钮是禁用的，而不是隐藏的)。这就是我得到的： $(".input-wrap{ $("button").sho

浏览 2提问于2021-11-18得票数 0

回答已采纳

2回答

onBlur没有在TextArea上工作

、

我正在根据表单字段上的输入进行值形成，为此，我使用了这个选择器 var value= jQuery(this).val(); });jQuery(document).on('blur', 'input[name*=\'soc

浏览 0提问于2015-08-23得票数 0

回答已采纳

1回答

根据下拉选择使用jquery验证textarea

、

我使用JQuery验证插件()来验证html表单。我希望只有当下拉菜单选择值为0时，textarea字段才是必需的。任何帮助都会很好。提前感谢！</option> <textarea id="explainwhy" name="explainwhy" rows="4"></textarea> </fo

浏览 2提问于2013-11-12得票数 1

回答已采纳

1回答

在GSP页面文本区域中显示数据

、、

我有一个带有两个选择下拉菜单的gsp页面。根据我选择的值并单击compare按钮，它将从数据库中检索值并进行操作。(如比较)如果它们是相同的打印在相同的gsp页面中，因为值是same.If，它们不相同，则该值必须与这些值并排显示在索引gsp页面中的两个文本区域中。" library="jquery" src="jquery/jquery-1.7.2.

浏览 0提问于2017-02-07得票数 0

1回答

隐藏jQuery验证错误消息

、

如何隐藏特定字段的jQuery验证错误消息？现在，当最后一个文本框被下拉菜单的选择所隐藏时，我也想隐藏它的jQuery验证错误消息。我该怎么做？

浏览 1提问于2013-01-08得票数 0

2回答

单击textarea中的字符串，然后复制(jQuery)

、、

我有一个textarea和一个button的表单。如果有人在textarea中输入文本并单击该按钮，我希望函数搜索textarea中是否输入了"Tobias“，如果是的话，将其替换为"Hanna”，最后将其复制到剪贴板。这是目前为止的代码：var $textArea = $("textarea"); var $newText = $textArea.val(

浏览 0提问于2016-11-23得票数 1

回答已采纳

8回答

如何选择某种元素？

、、、

id="textarea-post-1"></textarea><textarea id="textarea-cmnt-2"></textarea> <textarea id="

浏览 19提问于2015-10-09得票数 4

回答已采纳

5回答

文本区域最大长度下拉菜单

、、、

我有一个有3个值的下拉菜单，根据你在菜单中选择的值，我想让文本区MaxLength改变。这是可能的还是可行的？/best问候

浏览 3提问于2015-09-21得票数 1

1回答

用选定的选项填充文本区域

、

我有一个聊天系统，我想实现快速回答，用户可以快速回答“我将在5分钟内交付”，“我将在10分钟内交付”或自定义快速回答：“我将在”+数字输入字段值+“分钟”(问题在最后一个)。工作流程:1-用户选择一个快速答案2-聊天系统的文本区域然后填充上一个选择选项的值。但是，我也需要来自自定义数字输入字段的值。

浏览 0提问于2019-05-21得票数 1

回答已采纳

3回答

请解释一下这个jQuery

、、

也许我的上一个问题(现在被删除了)被误解了，所以这次我更清晰地重发了它：$("#tabs").tabs({ $('input[name=myinput], textarea[name=myinput]').attr('disabled',true); $('input[name=myinput].' + ui.pane

浏览 1提问于2010-07-01得票数 0

回答已采纳

1回答

如何添加Id属性选择器或将Id存储在Jquery变量中并将该变量用作选择器？

、、、、

我想在单击重放按钮时对文本区域元素执行显示/隐藏操作，在jquery中使用id作为选择器，但我的id的格式是id = "textarea"+dat.description_id，即dat.description_id是我连接的值。submit" id="replay-btn"+dat.description_id class="btn btn-primary m-2" onclick="myfun()") Reply 通过

浏览 17提问于2020-04-21得票数 0

回答已采纳

3回答

如何专注于文本区域值的末尾？

、、

这是我的代码：$('input').on('click', function(){})<textarea</e

浏览 2提问于2018-08-04得票数 1

回答已采纳

2回答

如何使用jquery根据所选选项从下拉列表中显示和隐藏文本区域

、、

我有一个jquery代码，用于根据下拉列表中的用户选择来显示或隐藏指定的textarea，其中每个选项都将向其显示相关的textarea。Jquery代码： jQuery(function() { <

浏览 2提问于2018-02-02得票数 0

回答已采纳

4回答

在表行中查找textarea并将其值替换为Jquery

、

html如果我知道

浏览 0提问于2011-01-05得票数 0

2回答

jquery提示不适用于文本区域

、、

我的jquery提示只有在文本框而不是文本框中才有效。如何让它同时适用于这两种情况。.attr('title')).addClass('hint');仅适用于：但不是在： <textareatitle="Enter Message Here"name="message" rows=8 cols=

浏览 0提问于2012-03-04得票数 1

回答已采纳

5回答

什么时候使用.val()和.innerHTML？

、、、

在JQuery中，当尝试访问元素时，我看到如果我有一个表单(比如textarea)，并且我想在其中获取text，我必须使用$("textarea").val(); 相反，如果我有一个h1元素，我必须使用h1.val()/textarea.innerHTML do not work

浏览 7提问于2016-12-27得票数 14

回答已采纳

2回答

为什么.val()不是一个函数？

、

<br /><textareaname="desc[]"></textarea><br /> 我正在尝试使用Javasc

浏览 0提问于2009-09-25得票数 8

回答已采纳

点击加载更多

Jquery根据值选择textarea

jQuery根据值选择textarea

基础概念

实现方法

1. 使用:contains()选择器

2. 使用.filter()方法进行精确匹配

3. 使用.filter()方法进行模糊匹配

4. 使用属性选择器（适用于初始值）

应用场景

注意事项

完整示例

常见问题解决

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

1. 使用`:contains()`选择器

2. 使用`.filter()`方法进行精确匹配

3. 使用`.filter()`方法进行模糊匹配