需求场景:
一个只读的input文本框,存在目的就是让用户复制其中的内容,,虽然可以用一键复制的插件,,但是对于文本框自身还是希望做些处理:
1、鼠标移入时候选中文本——onmouseover=”this.select();”
2、点击文本框时候仍然保持选中状态——然而直接用onclick=”this.select()” 时并不会看到直观的点击反馈←←至少我自己感觉略不爽——所以解决是加个延时onclick=”that = this;setTimeout(function(){that.select()},150);”
<input style="cursor: pointer;background: inherit;color: inherit;" readonly onmouseover="this.select();" onclick="that = this;setTimeout(function(){that.select()},150);" value="65533" type="text" />
2020-12-27:加长JQ版
(function() {
const fnReCover = ($el) => {
if ($el.data('val')) {
$el.val($el.data('val'));
} else {
$el.data('val', $el.val());
}
$el.focus();
$el.select();
}
// 因为是在zblog里选项器用的相邻
$(".readonly + *").click(function() {
const _this = this;
setTimeout(function() {
_this.select();
}, 150);
fnReCover($(this));
}).mouseenter(function() {
fnReCover($(this));
}).keyup(function() {
fnReCover($(this));
}).change(function() {
fnReCover($(this));
});
})();