自動調整大小的文本元素不適用於 keyup
[英]Auto resize text element not working with keyup
問題描述
在我下面的 jQuery 中，我有一個元素反映了輔助元素中的書面input 。 同時帶有反射文本的元素需要調整大小，這是有效的，但有兩個問題我無法解決：
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>
1 個解決方案
解決方案1
1 已采納 2019-03-29 23:58:50
問題是.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>
如何在加載時自動調整文本區域元素的大小？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.