0

ミディアムエディターで遊んでいたところ、何か特別なものが見つかりました。書き込み中にスペースを複数回押しても機能しないということは、エディターが複数のスペースを受け入れないことを意味します。なんてクールなんだ。

ここに画像の説明を入力

これをtextareasまたはcontenteditableに実装して、ユーザーが多くのスペースを入力するのを制限できれば素晴らしいでしょう。

誰かがそれを行う方法を知っている場合は、私と共有してください。

アップデート

<h2 contenteditable="true">Write here</h2>

ユーザーが複数のスペースをヒットできないようにするにはどうすればよいですか。

4

1 に答える 1

0

テキストエリアで試してみました。このテキストエリアに文字を入力する場合、複数のスペースを入力することはできません。これはあなたが探していたものですか?:

function trimSpaces(event){
   var content = $('#sampleText').val();
   //If you need to trim all white spaces and replace with single space
   //content = content.replace(/\s\s+/g, ' ');

   $('#sampleText').val("");
   content = content.replace(/  +/g, ' ');
   $('#sampleText').val(content);
}

function validate(event){
    // Donot add the character keyed into textbox before validation
	event.preventDefault();
	var content = $('#sampleText').val();
    //which is supported by FF and keyCode by other browsers. 
	var x = event.which || event.keyCode;
	
	if(x==32){
	  if( content[content.length -1] ==" "){
         // Do nothing if previous character was a space
	  }else{
        // Add the character into the text area if its not a space
		content+=String.fromCharCode(x);
		$('#sampleText').val(content);
	  }
	}else{
        // add any characters keyed in to the text area if its not a space.
		content+=String.fromCharCode(x);
		$('#sampleText').val(content);
	}	
}
<!DOCTYPE html>
<html>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<body>
  <textarea name="sampleText" id="sampleText" maxlength="200" onkeypress="validate(event)" onkeyup="trimSpaces(event)"></textarea>
</body>
</html>

于 2020-05-15T06:29:45.877 に答える