将文本输入到文本区域时,它会变得比区域宽,文本将被包装到下一行。有没有一种方法可以以编程方式确定何时发生这种情况?如何检测行何时自动包装在textarea中?
回答
当包装发生时没有发生实际事件,但如果知道textarea的宽度,则可以破解解决方案。
听取文本区域上的更改事件,并将文本转换为包装其内容的div;
<div class="textwidth"></div>
随着风格:
.textwidth {
position: absolute;
visibility: hidden;
height: auto;
width: auto;
}
计算与文本内容的DIV的宽度和比较,为textarea的宽度不变:
$('textarea').on('keyup', function() {
var lastLine = $(this).val().split('/n').pop();
var width = $('.textwidth').text(lastLine).width();
if (width > $('textarea').width()) {
// fire wrap event
}
});
这里是一个有点以次充好的小提琴,应该给你一些想法如何继续:http://jsfiddle.net/cXbAh/1/
这似乎可以工作。不过要注意的是,这两种字体必须完全相同,否则就会失火。 – 2013-05-08 14:32:48
@ChristopherCortez等宽也会使它更容易! – Jivings 2013-05-08 19:57:59
确实。我一直在试图用代码作为基础来提出一个更强大的解决方案,但现在我正在运行跨浏览器不可靠性(并不奇怪)。 – 2013-05-08 21:13:18
你可以n使用“隐藏”跨度来测量每一行的宽度。
如果线宽比textarea的宽度,则该行被包裹
function textWidth(txt, font, padding) {
$span = $('<span></span>');
$span.css({
font:font,
position:'absolute',
top: -1000,
left:-1000,
padding:padding
}).text(txt);
$span.appendTo('body');
return $span.width();
}
它在Firefox 42上似乎不适用于我 – fffred 2015-11-24 13:07:38
- 1. 如何检测textarea中的自动换行
- 2. 如何包装textarea
- 3. 如何在android中检测运动时自动捕获?
- 4. 检测textarea自然换行符
- 5. 如何检测用javascript包装?
- 6. 运行Spring4JUnitRunner测试时,如何自动装入字段?
- 7. 如何在SSIS包中执行自动化单元测试?
- 8. 弹簧自动装配自动检测
- 9. 如何在javascript中查找/检测页面中的任何textarea
- 10. 如何在vb.net中编程自动检测串行端口
- 11. 如何在TextMate R Bundle中自动包装R的运行时输出?
- 12. Vim换行:如何在包装一行时自动插入反斜线'\'?
- 13. 如何检测PEAR包是否安装在PHP脚本中?
- 14. 如何检测textarea值何时使用javascript更改?
- 15. 如何在多行<textarea>中实现自动完成?
- 16. 如何在安装时自动链接npm包?
- 17. textarea中的自动换行
- 18. jQuery可能检测用户在Textarea时何时离开?
- 19. 如何在Python中自动测量函数的执行时间
- 20. 我如何自动化WiX包装
- 21. Javascript检测textarea中的滚动条
- 22. 如何在编辑时自动检测超链接?
- 23. 如何获得包装的多行输入或textarea?
- 24. 如何将我的JSON行为结果包装到<textarea>
- 25. 如何覆盖JavaFX TextArea组件的单词包装行为?
- 26. 如何控制JavaFX TextArea自动滚动?
- 27. 如何在包装底部时将包装中心居中:0px?
- 28. 使用JavaScript检测TextArea中的自动缩进
- 29. 如何检测自动回复程序
- 30. 如何自动检测Arduino COM端口?
如果你去在底部则scrollHeight属性的变化更大,但我不认为只是包装自己做任何事情。我希望我错了。 – dandavis 2013-05-07 22:21:47
想到我可以使用['Range.getBoundingClientRect'](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect),不能成为一个工作的例子。您可以尝试将'