我正在尝试了解如何将以下 JFiddle 示例转换为单个 html 网页: http://jsfiddle.net/zqa511e9/
哪里做错了？样式和 javascript 代码都没有反射(reflect)在表单中。任何帮助将不胜感激。
<!DOCTYPE html>
<html>
<head>
<title>Expandable Text Area</title>
<style>
textarea {
width: 200px;
height:15px;
line-height:15px;
min-width: 200px;
max-width: 300px;
transition: width 0.25s;
resize:none;
overflow:hidden;
}
</style>
<script>
$('textarea').on('keydown', function(e){
if(e.which == 13) {e.preventDefault();}
}).on('input', function(){
$(this).height(1);
var totalHeight = $(this).prop('scrollHeight') -
parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
$(this).height(totalHeight);
});
</script>
</head>
<body>
<textarea placeholder="Autosize" data-autosize-input='{ "space": 40 }'>
</textarea>
</body>
</html>
最佳答案
更新代码。
你需要做两件事。 1.导入Jquery库。 2. 在 javascript block 中写入负载。
试试这个
<title>Expandable Text Area</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<style>
textarea {
width: 200px;
height:15px;
line-height:15px;
min-width: 200px;
max-width: 300px;
transition: width 0.25s;
resize:none;
overflow:hidden;
}
</style>
<script>
$(document).ready(function() {
$('textarea').on('keydown', function(e){
if(e.which == 13) {e.preventDefault();}
}).on('input', function(){
$(this).height(1);
var totalHeight = $(this).prop('scrollHeight') -
parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
$(this).height(totalHeight);
});
});
</script>
</head>
<body>
<textarea placeholder="Autosize" data-autosize-input='{ "space": 40 }'>
</textarea>
</body>
</html>
关于javascript - 使用 JFiddle 创建网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43282510/