ページにテキスト領域コントロールがあり、ユーザーがテキスト領域をクリックするか、「ENTER」キーを押すと、テキスト領域に箇条書きが作成されるようにコーディングしました。ただし、問題は、ユーザーがテキスト領域をクリックすると箇条書きが作成されるが、ユーザーがテキスト領域に何も入力しない場合は空になり、箇条書きを削除する必要があることです。簡単に言うと、テキスト領域の箇条書きは、データが含まれていない場合は削除する必要があります。そしてもう1つは、ユーザーがテキスト領域から箇条書きを削除しないようにすることです。
これが私のコードです：
<textarea name="MondayAcomp" id="MondayAcomp" cols="45" rows="5" onKeyDown="if(event.keyCode == 13) return false;" onKeyUp="bulletOnEnter(this.id)" onFocus="onfoc(this.id)" onBlur="onFocOff(this.id)" style="margin: 0px; width: 200px; height: 219px;"></textarea>
Javascript関数：
function onfoc(id) {
if (document.getElementById(id).value == "") {
document.getElementById(id).value += '• ';
}
}
function onFocOff(id) {
if (document.getElementById(id).value == '• ') {
document.getElementById(id).empty;
}
}
function bulletOnEnter(id) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
event.preventDefault();
document.getElementById(id).value += '\n• ';
}
var txtval = document.getElementById(id).value;
if (txtval.substr(txtval.length - 1) == '\n') {
document.getElementById(id).value = txtval.substring(0, txtval.length - 1);
}
}
.empty、です.value = "";。keyCodeあなたは合格する必要がeventあまりにもあなたのコールバック関数にパラメータを。returnキーコールバックの最後の行もチェックすることで、空の行が追加されないようにすることができます。function onfoc(id) {
if( document.getElementById(id).value == '' ) {
document.getElementById(id).value +='• ';
}
}
function onFocOff(id) {
if( document.getElementById(id).value == '• ' ) {
document.getElementById(id).value = '';
}
}
function bulletOnEnter(event, id) {
event = event || window.event;
// handle 'return' key
var keycode = event.keyCode || event.charCode || event.which;
var txtval = document.getElementById(id).value;
if( keycode == 13 && txtval.substr(txtval.length - 2) != '• ' ) {
event.preventDefault();
document.getElementById(id).value += '\n• ';
}
// remove possible last empty line
txtval = document.getElementById(id).value;
if( txtval.substr(txtval.length - 1) == '\n' ) {
document.getElementById(id).value = txtval.substring(0, txtval.length - 1);
}
// check if each line starts with a bullet
var lines = document.getElementById(id).value.split('\n')
for( var i = 0, l = lines.length; i < l; i++ ) {
if( lines[i].substr(0, 1) !== '•' ) {
lines[i] = '•' + lines[i];
}
}
document.getElementById(id).value = lines.join('\n');
}<textarea id="MondayAcomp" onKeyDown="if(event.keyCode == 13) return false;" onKeyUp="bulletOnEnter(event, this.id)" onFocus="onfoc(this.id)" onBlur="onFocOff(this.id)"></textarea>追加の回答として、質問にjQuery。でタグを付けたため、プレーンJSの代わりにjQueryを使用するようにコードを変換しました。
$('#MondayAcomp').on({
focus: function() {
if( $(this).val() == '' ) {
$(this).val($(this).val() + '• ');
}
},
blur: function() {
if( $(this).val() == '• ' ) {
$(this).val('');
}
},
keydown: function(e) {
if( e.keyCode == 13 ) {
e.preventDefault();
}
},
keyup: function(e) {
var element = $(this),
value = element.val();
// handle 'return' key
if( e.keyCode == 13 && value.substr(-2) != '• ' ) {
e.preventDefault();
element.val((value += '\n• '));
}
// remove possible last empty line
if( value.substr(-1) == '\n' ) {
element.val((value = value.substring(0, value.length - 1)));
}
// check if each line starts with a bullet
var lines = element.val().split('\n')
for( var i = 0, l = lines.length; i < l; i++ ) {
if( lines[i].substr(0, 1) !== '•' ) {
lines[i] = '•' + lines[i];
}
}
element.val(lines.join('\n'));
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="MondayAcomp"></textarea>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加