如何制作像Twitter一样突出显示字符限制的文本区域？
培拉Ş
Twitter的“提交推文”文本框突出显示了超出字符数限制的字符：
如您所见，超出字符限制的字符以红色突出显示。我怎样才能实现这样的目标？
值得重要
您将在此处找到必要的解决方案和所需的代码：
...和这里：
您的问题似乎是重复的。
注意：我没有选择将以上链接发布为评论（即特权取决于信誉）。
这是Simon Kuang推荐的代码（请参阅注释）：
HTML：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<h3>Your text here</h3>
<div contenteditable="true" id="myDiv">edit me
</div>
<p>
<h3>Stuff over 19 characters</h3>
<div id="extra">
</div>
<p>
<h3>Sample output</h3>
<div id="sample">
</div>
</body>
</html>
CSS：
.highlight {
color:red;
}
JavaScript：
$(document).ready(function() {
$('#myDiv').keyup(function() {
var content = $('#myDiv').html();
var extra = content.match(/.{19}(.*)/)[1];
$('#extra').html(extra);
var newContent = content.replace(extra, "<span class='highlight'>" + extra + "</span>");
$('#sample').html(newContent);
});
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Ajax将格式化的文本传递到其他php文件并像文本区域一样显示
- 2
如何像苹果一样突出显示UIView
- 3
如何从文本区域中突出显示的文本中获取邻居字符？
- 4
像截图工具一样突出显示效果
- 5
如何在文本区域中突出显示文本的一部分
- 6
如何像对待PHPStorm中的php语法突出显示一样对待.tpl语法突出显示
- 7
如何像对待PHPStorm中的php语法突出显示一样对待.tpl语法突出显示
- 8
如何在watchOS上像文本视图一样显示文本
- 9
如何在watchOS上像文本视图一样显示文本
- 10
快速突出显示文本区域
- 11
如何制作像sencha一样的文档页面？
- 12
如何制作像电视一样的静态屏幕效果？
- 13
我如何像博客一样制作RSS提要
- 14
如何制作像sencha一样的文档页面？
- 15
如何制作像CSS过渡一样的过渡效果？
- 16
如何制作像滑动一样的动画
- 17
如何制作像木板一样的码头
- 18
如何在像网格一样显示的 div 中垂直对齐文本？
- 19
像现在一样制作动画
- 20
像CKEditor一样制作textarea
- 21
像其他应用程序一样，如何在短时间内突出显示列表条目？
- 22
如何在Libreoffice中像十字线一样突出显示当前行和列？
- 23
Twitter的CodeMirror像亮点一样
- 24
如何使Emacs文本像Netbeans一样清晰呈现
- 25
如何使Emacs文本像Netbeans一样清晰呈现
- 26
如何读取像文本一样的excel（.xls）文件？
- 27
如何显示像弹出窗口一样的小部件
- 28
如何像代码一样显示熊猫滚动窗口？
- 29
如何像桌面一样显示移动设备？
我来说两句