这可能真的很蠢,但有人向我推荐了这个 fiddle
我想测试一下,但我想用 Notepad++ 编写它,唯一的问题是我不知道将所有三种语言组合到一个文档中的正确语法。
最佳答案
添加<script>
标签以包含脚本。对于您需要在 HTML 之后加载的内容,将其加载到底部 </body>
之前.
添加 <style>
在你的 head
中标记包括 CSS
.
<!DOCTYPE html>
<html>
<head>
<style>
#textin {
width: 500px;
height: 150px;
}
#textout {
font-family: courier;
font-size: 12px;
width: 40em;
height: 200px;
resize: none;
}
</style>
</head>
<body>
<form>
<textarea id="textin" name="myText"></textarea>
<br/>
<br/>Cost:
<input type="text" name="lineCount" size="1" value="0" />Dollars
<br/>
<br/>Formatted:
<br/>
<textarea id="textout" name="formatText" disabled="yes"></textarea>
</form>
<script>
function countLines() {
var theArea = document.getElementById("textin");
var theLines = theArea.value;
theLines = theLines.split("\n");
var finalLines = [];
var numLines = theLines.length;
for (var i = 0; i < numLines; i++) {
if (theLines[i].length > 40) {
if(theLines[i].match(/^.{0,38}\S{41}/)) {
theLines[i] = theLines[i].replace(/^(.{40})/, "$1\n");
var newLines = [i,1].concat(theLines[i].split("\n"));
numLines++;
Array.prototype.splice.apply(theLines, newLines);
} else {
theLines[i] = theLines[i].replace(/(.{1,40}[^\S\n])/, "$1\n");
var newLines = [i,1].concat(theLines[i].split("\n"));
numLines++;
Array.prototype.splice.apply(theLines, newLines);
}
}
finalLines.push(theLines[i]);
}
while (finalLines.length && finalLines[finalLines.length - 1].match(/^\s*$/)) {
finalLines.pop();
}
theArea.form.lineCount.value = finalLines.length;
document.getElementById("textout").value = finalLines.join("\n");
}
var el = document.getElementById("textin");
if (el.addEventListener) {
el.addEventListener("input", countLines, false);
} else {
el.attachEvent('onpropertychange', countLines);
el.attachEvent('onkeypress', countLines);
}
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on' + event, handler);
};
} else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init() {
var text = document.getElementById('text');
function resize() {
text.style.height = 'auto';
text.style.height = text.scrollHeight + 'px';
}
/* 0-timeout to get the already changed text */
function delayedResize() {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
</script>
</body>
</html>
关于html - 如何将 html、css 和 javascript 代码从 jsfiddle 合并到一个文档中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21176427/