首先引用文件

<link rel="stylesheet" href="style.css" />

各种图标，clearfix以及色调，核心代码js

<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x21;"></div>
		<input type="text" readonly value="&amp;#x21;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x22;"></div>
		<input type="text" readonly value="&amp;#x22;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x23;"></div>
		<input type="text" readonly value="&amp;#x23;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x24;"></div>
		<input type="text" readonly value="&amp;#x24;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x25;"></div>
		<input type="text" readonly value="&amp;#x25;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x26;"></div>
		<input type="text" readonly value="&amp;#x26;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x27;"></div>
		<input type="text" readonly value="&amp;#x27;" />
	</div>
核心代码

document.getElementById("glyphs").addEventListener("click", function(e) {
		var target = e.target;
		if (target.tagName === "INPUT") {
			target.select();
		}
	});