textarea元素的placeholder属性值中的json字符串格式化显示
背景：
在项目开发中，可能会碰到需要用户在textarea中输入json格式数据的场景（例如做动态内容的多语言），这个时候，我们可以在textarea元素的placeholder属性值中写上输入json数据的格式，起到提示作用。
示例源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>textarea元素的placeholder属性值中的json字符串格式化显示</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 872px;
margin: 20px auto 0 auto;
}
textarea {
width: 780px;
height: 480px;
padding: 10px;
border: 1px solid #ccc;
resize: none;
vertical-align: middle;
}
textarea:hover {
border: 1px solid black;
}
textarea:focus {
border: 1px solid black;
outline: none!important; /* 去掉textarea默认的加粗的外边框*/
}
label {
display: inline-block;
width: 70px;
vertical-align: top;
}
</style>
</head>
<body>
<form>
<div>
<label for="multiLanguage">多语言：</label><textarea id="multiLanguage"></textarea>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
var multiLanguageJsonObj = {
"zh-cn": "这是中文内容。",
"en": "This is english content.",
"ja": "これは英語のコンテンツです",
"ko": "영문컨텐츠입니다.",
"id": "Ini adalah konten bahasa Inggris."
};
// 将json对象转成格式化的json字符串
var formatted = JSON.stringify(multiLanguageJsonObj, null, 4);
var placeholderValue = "请输入json格式的多语言数据，例如：\n" + formatted;
$("#multiLanguage").attr("placeholder", placeholderValue);
});
</script>
</body>
</html>效果图：
