JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<h2>Input Prefix plugin</h2>
<div class="col-sm-offset-2 col-sm-8 form-inline">
<input type="text" data-prefix="任意の接頭語:" class="form-control"/>
</div>
</div>
CSS
body{width:80%;margin:auto;}
h2{font-size:16px;margin-bottom:20px;}
JavaScript
/*!
* Input Prefix plugin for jQuery, by Grégoire Fruleux
* Copyright 2016 Salto Consulting
* Licensed under https://opensource.org/licenses/GPL-3.0
* Source https://github.com/gfruleux/jquery-plugin-input-prefix
*/
+function ($) {
'use strict';
// INPUTPREFIX CLASS DEFINITION
// ============================
var Inputprefix = function (element) {
this.$element = $(element);
this.prefix = undefined;
this.prefixLen = undefined;
this.cursorStart = undefined;
this.cursorEnd = undefined;
this.currentValue = undefined;
this.currentValueLen = undefined;
this.setCurrentInfos(this.$element);
this.$element.val(this.prefix);
this.$element.on("keydown", $.proxy(this.preInputDataPrefixKeydown, this));
this.$element.on("input", $.proxy(this.preInputDataPrefixChange, this));
}
Inputprefix.version = "0.0.1";
// INPUTPREFIX TARGET FUNCTIONS
// ============================
Inputprefix.prototype.setCurrentInfos = function ($target) {
this.prefix = $target.data("prefix");
this.prefixLen = this.prefix.length;
this.cursorStart = $target.get(0).selectionStart;
this.cursorEnd = $target.get(0).selectionEnd;
this.currentValue = $target.val();
this.currentValueLen = this.currentValue.length;
if (this.currentValueLen === undefined || this.currentValueLen === 0)
$target.val(this.prefix);
}
Inputprefix.prototype.setTargetSelection = function ($target, value) {
$target[0].selectionStart = $target[0].selectionEnd = value;
}
// INPUTPREFIX KEYDOWN PREPROCESSOR-FUNCTION
// =========================================
Inputprefix.prototype.preInputDataPrefixKeydown = function (event) {
var keyCode = event.which;
this.setCurrentInfos(this.$element);
if (keyCode === 8 || keyCode === 46) {
event.preventDefault();
this.inputDataPrefixKeydown(event);
}
};
// INPUTPREFIX KEYDOWN FUNCTION
// ============================
Inputprefix.prototype.inputDataPrefixKeydown = function...