javascript - 自动调整文本元素大小不适用于 keyup-6ren

javascript - 自动调整文本元素大小不适用于 keyup

转载作者：行者123 更新时间：2023-11-30 19:40:47

25

4

在我下面的 jQuery 中，我有一个元素在次要元素中反射(reflect)了写入的 input。同时带有反射文本的元素需要调整大小，这是可行的，但有 2 个问题我无法解决:

1.按住退格键时，它跟不上。
2.当您按单个退格键时，它会跳过一个字符并且字段不能被清空。

请看下面的片段:

jQuery(document).ready( function() {
    jQuery(function(){
        jQuery('#vanity-span').text(jQuery('#reflection').val());
        jQuery('#reflection').width(jQuery('span').width());
    }).on('input', function () {
        jQuery('#vanity-span').text(jQuery('#reflection').val());
        jQuery('#reflection').width(jQuery('span').width());
    });
    jQuery('#vanity-url').bind('keypress keyup blur', function() {
        jQuery('#reflection').val(jQuery(this).val());
    });
});

body {
  background-color: #e4e4e4;
  font-family: Arial;
}

#vanity-url-wrapper {
  margin-top: 3em;
  text-align: center;
}

#vanity-url-wrapper > span {
  background-color: #FBE3CF;
  border-radius: 8px;
  padding: 0.5em 0;
  border: 2px solid orange;
}

.pre-span {
  background-color: orange;
  color: white;
  font-weight: bold;
  padding: 0.5em;
}

#vanity-url {
  display: block;
  text-align: center;
  width: 12em;
  margin: 3em auto;
  font-size: 1.2em;
  border-radius: 5px;
  border: 2px solid orange;
  padding: 0.5em;
}

#vanity-span{
  padding: 0.5em;
}

#reflection {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
  <div id="vanity-url-wrapper">
    <span>
      <span class="pre-span">https://example.com/</span>   
      <span id="vanity-span"></span>
      <input id="reflection" type="text" readonly>
      <span class="pre-span">/</span>
    </span>
  </div>
  <input id="vanity-url" type="text" placeholder="Type here your vanity URL">
</body>

最佳答案

问题是 .bind('keypress keyup blur', function() { 不能很好地更新值。当按下键时，它需要更新并等待向上，然后跳过，反之亦然。

所以这里的解决方案是使用 .on('input', function() { 代替。

查看以下结果:

jQuery(document).ready( function() {
    jQuery(function(){
        jQuery('#vanity-span').text(jQuery('#reflection').val());
        jQuery('#reflection').width(jQuery('span').width());
    }).on('input', function () {
        jQuery('#vanity-span').text(jQuery('#reflection').val());
        jQuery('#reflection').width(jQuery('span').width());
    });
    jQuery('#vanity-url').on('input', function() {
        jQuery('#reflection').val(jQuery(this).val());
    });
});

body {
  background-color: #e4e4e4;
  font-family: Arial;
}

#vanity-url-wrapper {
  margin-top: 3em;
  text-align: center;
}

#vanity-url-wrapper > span {
  background-color: #FBE3CF;
  border-radius: 8px;
  padding: 0.5em 0;
  border: 2px solid orange;
}

.pre-span {
  background-color: orange;
  color: white;
  font-weight: bold;
  padding: 0.5em;
}

#vanity-url {
  display: block;
  text-align: center;
  width: 12em;
  margin: 3em auto;
  font-size: 1.2em;
  border-radius: 5px;
  border: 2px solid orange;
  padding: 0.5em;
}

#vanity-span{
  padding: 0.5em;
}

#reflection {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
  <div id="vanity-url-wrapper">
    <span>
      <span class="pre-span">https://example.com/</span>   
      <span id="vanity-span"></span>
      <input id="reflection" type="text" readonly>
      <span class="pre-span">/</span>
    </span>
  </div>
  <input id="vanity-url" type="text" placeholder="Type here your vanity URL">
</body>

关于javascript - 自动调整文本元素大小不适用于 keyup，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55422036/

25

4

0

文章推荐： javascript - 得到答案后启动 `onicecandidate` 事件

文章推荐： javascript - 如何在 TypeScript 中映射多个类型的数组？

文章推荐： c - 分区算法运行时错误。有人可以帮我找出问题所在吗？

文章推荐： c# - 如何通过字符串数组的第一列搜索 List？

javascript - 如何使 keyup() 仅在字段中的第一个 keyup 上起作用
我创建了一个 keyup() 函数，代码在这里 $(document).ready(function() { var scntDiv = $('#add_words'); var wo
javascript - .on ('keyup' , function(){ 仅在 keyup 时触发
我希望它只在 keyup 而不是之前触发。有人可以帮忙吗？ $(function() { $('#acf-field_5a32085c7df98-field_5a3208f87df99').on('k
jquery - $ ("#input").keyup 无法像 $(document).keyup 那样工作
在 Chrome 30.0.1599.101 和 IE 11 中，输入选择器无法在 Firefox 25.0.1 中正常工作在 Chrome/IE 中损坏: $(document).ready(fu
javascript - 异步 keyup 事件/如何短路顺序 keyup 事件以提高速度
在我为工作而构建的网站上，我们有一个搜索栏，用户可以在其中输入内容以搜索存储在一组元素数据中的各个字段。当他们开始输入时，问题出现在较慢的浏览器中。我尝试做的是以下操作，使用 jQuery Defe
javascript - 窗口 keyup 事件 - 你能在页面处于事件状态时随时收听 keyup 吗？
我正在尝试使用 vanilla js 编写一些简单的东西来在用户按下回车键时触发一个函数。我在下面找到了一些代码，但我不确定如何让它工作，因为该函数没有名称。 function (event) {
jquery - 在另一个 contenteditable div 的 keyup() 上的文本区域上模拟 keyup()
场景如下: 我有一个内容可编辑的 div。我还有一个文本区域，其中 .keyup() 上发生了一些事情。我需要这样，在content editable div的keyup()上，将contented
JavaScript .on ("keyup")
有一个输入文本会在“onkeyup”事件上触发一个函数。当该函数触发时，我将使用 .on("keyup") 方法绑定(bind)一个“keyup”事件，以获取最后按下的键以查明它是否是字母数字，以便触
jQuery KeyUp 和单击
我想知道如何对同一个 #id 执行 .keyup() 和 .click() ？即本质上，我想在用户尝试点击 enter 或点击 #search 按钮时验证 #id 。非常感谢最佳答案 $('#f
jquery keyup 检测输入中的粘贴文本
我必须在这里使用jquery keyup来检测用户是否输入任何文本，但我的问题是如果用户使用鼠标粘贴文本，它将无法检测到它，你能告诉我原因吗？这是我的源代码: $("textarea").keyup
jquery keyup 函数检查是否为数字
我正在尝试创建一个输入字段，用户只能在其中输入数字。这个功能对我来说已经可以正常工作了: $('#p_first').keyup(function(event){ if
javascript - keyup 事件总是返回大写字母
我正在尝试编写类似于“占位符”polyfill 的内容。我想捕获输入字段上的 keyup 事件并获取用户输入的字符，所以我有以下代码: $elem.on('keyup',function(e){
jquery - 手动触发jquery keyup？
我想我已经弄清楚了......请参阅我的评论。抱歉。我有一个 JSON Web 服务，它在某个 keyup() 事件上调用，该事件根据输入检索一些数据。我想在输入任何内容之前加载一组初始数据。我正在
javascript - Keyup:选中复选框时添加值
所以我使用 Keyup 来计算输入字段的总数。到目前为止，一切都很好。但现在我想这样做:如果选中#a 复选框，则将总金额加 12。如果没有，则添加 0。我的代码基于此:http://jsfiddle
javascript - .on ('keyup' , ..) 不在输入上执行
我在弄清楚为什么 keyup 事件在以下情况下不起作用(不显示警报)时遇到问题，我对表单使用 bootstrap 3，但我不认为 form-control取消键盘输入？ HTML: jQuery:
javascript - 如何根据变量的存在来更改 .keyup ？
我正在构建一个搜索表单，.keyup 中的 ajax 函数可以有不同的参数，我想通过检查是否存在另一个值来检查是否需要包含此参数。这是我现在拥有的: var delay = (function() {
javascript - 无需按下即可触发 keyup
我的 html 和 jquery 代码 Insert title here td { min-height: 50px; min-width: 50px; }
javascript - keyup 事件重置输入字段
每次我按下键盘上的一个键，它都会将 $(this).val(""); 设置为 null，并且 score 变量将为 -2 . initialize: function() { var scor
Javascript:keyup 事件的输入计算其总和
我是 javascript 及其事件的新手。这是我的表格 html 代码，其中有收入标题及其各自的价格。 sn Title of income
Javascript keyup 调用其他表值
我有一个这样的表: 当数量/价格变化小计也发生变化时，我想制作Javascript。我的js: $("#invoice_item").delega
javascript - keyup 功能不起作用
我正在 js 中制作字符计数器，但 keyup 事件不起作用??? $(document).ready(function() { function countingCharacter(elemen

首页

博学

6Ren·AI

商城

javascript - 自动调整文本元素大小不适用于 keyup