1
A
回答
2
我不认为这是这么难。我做了一个快速示例,它适用于除Safari之外的大多数现代浏览器。 它将插入符号绘制在画布上,并将其设置为输入的背景,并将其设置为从浏览器插入位置计算出的位置。
它检查浏览器是否支持css属性,如果没有,它不会做任何事情,因为系统插入符号和我们的脱字符在同一时间都可见。从我测试的浏览器中,只有Safari不支持它。
$("input").on('change blur mouseup focus keydown keyup', function(evt) {
var $el = $(evt.target);
//check if the carret can be hidden
//AFAIK from the modern mainstream browsers
//only Safari doesn't support caret-color
if (!$el.css("caret-color")) return;
var caretIndex = $el[0].selectionStart;
var textBeforeCarret = $el.val().substring(0, caretIndex);
var bgr = getBackgroundStyle($el, textBeforeCarret);
$el.css("background", bgr);
clearInterval(window.blinkInterval);
//just an examplethis should be in a module scope, not on window level
window.blinkInterval = setInterval(blink, 600);
})
function blink() {
$("input").each((index, el) => {
var $el = $(el);
if ($el.css("background-blend-mode") != "normal") {
$el.css("background-blend-mode", "normal");
} else {
$el.css("background-blend-mode", "color-burn");
}
});
}
function getBackgroundStyle($el, text) {
var fontSize = $el.css("font-size");
var fontFamily = $el.css("font-family");
var font = fontSize + " " + fontFamily;
var canvas = $el.data("carretCanvas");
//cache the canvas for performance reasons
//it is a good idea to invalidate if the input size changes because of the browser text resize/zoom)
if (canvas == null) {
canvas = document.createElement("canvas");
$el.data("carretCanvas", canvas);
var ctx = canvas.getContext("2d");
ctx.font = font;
ctx.strokeStyle = $el.css("color");
ctx.lineWidth = Math.ceil(parseInt(fontSize)/5);
ctx.beginPath();
ctx.moveTo(0, 0);
//aproximate width of the caret
ctx.lineTo(parseInt(fontSize)/2, 0);
ctx.stroke();
}
var offsetLeft = canvas.getContext("2d").measureText(text).width + parseInt($el.css("padding-left"));
return "#fff url(" + canvas.toDataURL() + ") no-repeat " +
(offsetLeft - $el.scrollLeft()) + "px " +
($el.height() + parseInt($el.css("padding-top"))) + "px";
}
input {
caret-color: transparent;
padding: 3px;
font-size: 15px;
color: #2795EE;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
如果有兴趣,我可以清理了一下,在一个jQuery插件包裹。
编辑:忘了闪烁,所以我添加了它。更好的方法是将它添加为css动画,在这种情况下,插入符应位于输入中的单独html元素中。
相关问题
- 1. 怎样才能使文字输出变得轻松简单?
- 2. 我怎样才能改变一个数字,字符串
- 3. 我怎样才能摆脱选择输入边界
- 4. 我怎样才能比较用户已输入的字符串?
- 5. 我怎样才能输出这个函数是一个简单的字符串?
- 6. 我怎样才能摆脱路径查询字符串
- 7. 我怎样才能改变数独
- 8. 我怎样才能改变这与jquery?
- 9. 我怎样才能改变IE
- 10. 我怎样才能改变/在商店
- 11. 我怎样才能改变ATTR链接
- 12. 我怎样才能改变“UPDATA”更新
- 13. 我怎样才能改变writer.println
- 14. 我怎样才能改变搜索条
- 15. 我怎样才能摆脱“空白”
- 16. 我怎样才能摆脱撇号?
- 17. 我怎样才能摆脱0xFEEFEE在VC
- 18. 我怎样才能增加输入控制动态... ??? js
- 19. 我怎样才能得到一个js变量插入iframe中
- 20. 我怎样才能从字符串
- 21. 我怎样才能子串字符串?
- 22. 我怎样才能打印字符值?
- 23. 我怎样才能从字符串
- 24. HTML-CSS-JS我怎样才能把它变成一个'文字轮播'?
- 25. 我怎样才能改变数字到字母C#
- 26. 我怎样才能“地图”的字典来改变在Python
- 27. 我怎样才能从字符串中获得可变数字?
- 28. 我怎样才能真正摆脱eclipse classpath变量
- 29. 我怎样才能读取JS
- 30. 我怎样才能返回gzip压缩的CSS/JS
**否**。许多人在你之前(包括我)尝试失败。如果你真的想追求它(祝你好运),你需要一个带有不可见文本的文本框,在它下面有一个'div',然后更新以包含文本,然后另一个'div'按照你想要的方式设置插入符号以查看用户键入和选择哪个移动。虽然,我认为WebKit浏览器本身可以做到这一点... – Toastrackenigma
[Styling text input caret]的可能重复(https://stackoverflow.com/questions/7339333/styling-text-input-caret) – Toastrackenigma