在我的下面的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>
问题是.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>