Asked Oct 9th, 9:34 AM 117 0 3
  • 117 0 3
0

Cách thêm chữ vào vị trí dấu nhắc đánh chữ khi bấm vào nút trong Javascript

Share
  • 117 0 3

Mình có một dòng gồm những ID đại khái như sau:

<span id="son-goku" onClick="FunnyText()">Son Goku</span> <span id="vegeta" onClick="FunnyText()">Vegeta</span>

Bây giờ mình muốn khi người dùng bấm vào chữ Son Goku thì sẽ viết ra chữ "Hello" vào vị trí dấu nhắc đánh chữ. Và nếu người dùng bấm vào chữ Vegeta thì sẽ viết ra chữ "World" vào vị trí dấu nhắc đánh chữ.

Giả sử vị trí dấu nhắc đánh chữ đang nằm ở trong một textarea nằm ở bên trên. Nó giống như kiểu mình insert special characters hay emojis thường thấy trong các công cụ soạn thảo văn bản.

Làm sao mình có thể làm được điều này?

3 ANSWERS


Answered Oct 9th, 10:13 AM
+1

Đã có giải pháp cho vấn đề này https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement

Script:

  <script type="text/javascript">
function insertMetachars(sStartTag, sEndTag) {
  var bDouble = arguments.length > 1, oMsgInput = document.myForm.myTxtArea, nSelStart = oMsgInput.selectionStart, nSelEnd = oMsgInput.selectionEnd, sOldText = oMsgInput.value;
  oMsgInput.value = sOldText.substring(0, nSelStart) + (bDouble ? sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag : sStartTag) + sOldText.substring(nSelEnd);
  oMsgInput.setSelectionRange(bDouble || nSelStart === nSelEnd ? nSelStart + sStartTag.length : nSelStart, (bDouble ? nSelEnd : nSelStart) + sStartTag.length);
  oMsgInput.focus();
}
 </script>

Form:

<form name="myForm">
<p><span onclick="insertMetachars('Hello');">Son Goku</span> </p>
<p><textarea name="myTxtArea" rows="10" cols="50">Alibaba và 40 bà vợ</p></form>
Share
Answered Oct 9th, 10:38 AM
+1

Mình thực sự không hiểu câu hỏi lắm, nhưng có lẽ sửa code như này sẽ hợp lí theo yêu cầu của bạn?

<form><textarea id="txt1"></textarea> <span onclick="insertText('txt1', 'Hello');">Son Goku</span><span onclick="insertText('txt1', 'World');">Vegeta</span> </form>

<script>
	function insertText(elemID, text) {
		var element = document.getElementById(elemID);
		element.value += text;
	} 
</script>

Vấn đề của bạn nằm ở chỗ:

elem.innerHTML += text;

DOM lúc này vẫn thay đổi nhưng giá trị hiển thị vẫn sẽ là giá trị cũ, bạn có thể debug bằng mở F12 -> Elements -> Để sử dụng Textarea bạn nên sử dụng như sau:

element.value += text;
Share
Dr Dokkan @dokkan7
Oct 9th, 1:46 PM

Cảm ơn bạn.

0
| Reply
Share
Answered Oct 9th, 9:37 AM
Share
Dr Dokkan @dokkan7
Oct 9th, 9:39 AM

Bạn hiểu nhầm ý của mình rồi, nên mình sửa lại tiêu đề câu hỏi một chút. Vị trí chuộc khác với vị trí dấu nhắc đánh chữ. Xin lỗi.

0
| Reply
Share