Onload 使输入大小适合文本长度

2024-03-17

我试图让 jQuery 测试 onLoad 输入框中文本的长度,并更改输入框的大小以适应。这是迄今为止我的代码尝试:

$("#emailSubject").attr('size', this.val().length);

我收到以下错误:

this.val 不是函数

我究竟做错了什么?

Update:现在我不再收到第一个错误,但长度显示为 0,尽管它不应该是这样。 (我正在使用警报来检查长度是多少)。为什么会发生这种情况?

Update:这是代码上下文:

$(
        function()
        {
            //works correctly   
            alert($("#emailSubject").val().length);
            //throws error
            $("#emailSubject").attr('size', ($(this).val().length)); 
        }
    )

新错误-长度在警报中正确显示,但我收到错误:

索引或大小为负值或大于允许的量。


As Alien Webguy said https://stackoverflow.com/questions/6819548/onload-fit-input-size-to-length-of-text/6819648#6819648, you're trying to call a jQuery function (val) on what's probably a raw DOM element or the window object (you haven't shown enough context for us to know what this is, but the error tells us it's not a jQuery instance) the document object (because that's what jQuery sets this to when calling your ready handler). (Your update clarified it.) So the first thing is to get the correct reference for the field and wrap it in a jQuery instance.

但单独来说,如果你设置size对于字符数,该字段几乎肯定会比您想要的大得多。那是因为size以统一的字符宽度工作。

相反,通常的做法是使用与输入元素具有相同字体系列、样式、大小、文本装饰等的页外元素来测量实际字符串。像这样的东西(实时复制 http://jsbin.com/ifuzop):

CSS:

#theField, #measure {
  font-family: serif;
  font-size: 12pt;
  font-style: normal;
}
#measure {
  position: absolute;
  left: -10000px;
  top: 0px;
}

HTML:

<input type='text' id='theField' value=''>
<span id="measure"></span>

JavaScript:

jQuery(function($) {
  var field;

  // Hook up some events for resizing
  field = $("#theField");
  field.bind("change keypress click keydown", function() {
    resizeIt(field);
  });

  // Resize on load
  resizeIt(field);

  // Function to do the work
  function resizeIt(field) {
    var measure = $("#measure");
    measure.text(field.val());
    field.css("width", (measure.width() + 16) + "px");
  }
});

请注意,我也在调整各种事件的大小;我怀疑那里的列表是否全面,但它给了你一个想法。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Onload 使输入大小适合文本长度 的相关文章

  • 使用 jquery .find() 获取子项

    我有以下标记 div div class item div class item box div class one div div div div class item div class item box div class one d
  • 如何在 select2 下拉列表中换行?

    我正在使用 select 2 下拉菜单 然后在其内容中显示一些长句子 我想在句子的正确位置添加换行符 但下拉菜单是自动调整的 For example the content of the dropdown right now looks l
  • 用户脚本 - 有没有办法将 jquery 代码注入 angularjs dom?

    所以我正在尝试为一个网站创建用户脚本 我无法更改网站的任何源代码 因为它不是我的 网站到处都使用 AngularJS 控制器 我研究了几天如何做到这一点 但没有成功 所以我尝试注入代码 nav after div test div 当我通过
  • Masonry - imagesLoaded - 不是函数

    Masonry and imagesLoaded应加载并正常工作 已经制作了一个类似的网站 并且可以正常运行 我不知道我的问题出在哪里 所以我希望你能看到问题所在 应该是少了点什么 在 Chrome Inspect 中 我收到以下错误 Un
  • 选择所有选项值而不是第一个

    我有一个正在运行的脚本 可以根据所选的下拉选项显示 隐藏 div 在用户在下拉列表中进行选择之前 我需要隐藏除第一个 div 之外的所有 div 根据下面的脚本 如何从除第一个选项之外的所有选项中获取值 以便隐藏除第一个 div 之外的所有
  • 获取 FileReader() 的结果对象

    有什么方法可以在不通过函数的情况下获取 FileReader 的结果对象 我在下面制作了示例代码 HTML br br br div div JS var code lorem ipsum input type file change fu
  • 我如何能够以两行显示标题,并且每行的字体大小不同?

    我正在使用 Google Chart API 创建时间线图 并希望将图的标题修改为两行 问题 我如何能够显示具有不同字体大小的两线图表标题 电流输出 理想输出 相关研究 我唯一能找到的是有人试图用饼图来做到这一点 但我尝试了但无法使其发挥作
  • ajaxChosen 插件将无法工作

    我整个下午都在摆弄 ajaxChosen 因为我喜欢 Chosen 但我的选项值集变得太大了 我也尝试过 select2 但它太慢了 http harvesthq github io chosen http harvesthq github
  • 如何使用 JavaScript 创建链接?

    我有一个标题字符串和一个链接字符串 我不知道如何将两者放在一起以使用 JavaScript 在页面上创建链接 任何帮助表示赞赏 我试图解决这个问题的原因是因为我有一个 RSS 源并且有一个标题和 URL 列表 我想将标题链接到 URL 以使
  • 使用 jQuery 从 CKEditor 的 iframe 中获取内容

    我有一个自定义编写的 CMS 它使用CKEditor http ckeditor com FCKEditor v3 用于编辑内容 我也在使用jQuery 验证 http bassistance de jquery plugins jquer
  • 如何格式化 Highcharts 的 (x,y) 对数据的日期时间

    我的序列化方法会产生如下所示的日期时间字符串 2014 07 09T12 30 41Z 为什么下面的代码不起作用 function container highcharts xAxis type datetime series data x
  • focusout 事件后,Mouseleave 事件在 Firefox 中无法持续触发

    我正在运行以下代码
  • 从 Laravel 4 输入生成新数组

    我使用 Input all 从动态生成的表单中获取一些输入 我使用 jQuery 来允许用户添加字段 字段名称为 first names last names 和 emails input 变量现在看起来像这样 array size 4 t
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 图像背景不透明度不影响边框

    如何设置背景不透明度而不影响边框线不透明度 我找到的解决方案没有帮助 div class selected img src assets img image product 1 thumbnail jpg alt product 1 thu
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • 在 JavaScript 循环之外声明变量可以提高速度和内存?

    C 也有类似的问题 但我们没有看到 JavaScript 的任何问题 在循环内声明变量是否可以接受 假设循环有 200 次迭代 使用样本 2 相对于样本 1 是否有性能要求 内存和速度 我们使用 jQuery 来循环 它提高了我们将 var
  • 在 CKEditor 中设置字体大小和字体系列

    我正在使用 ckeditor 我想问一下这个插件如何设置font family和font size 我尝试过使用 CKEDITOR config font defaultLabel Arial CKEDITOR config fontSiz
  • Jquery - 选择选项后如何获取选项的特定数据类型?

    我将直接跳到标记 然后解释我想要做什么 HTML 选择选项

随机推荐