Yêu cầu thg 10 9, 2020 9:34 SA 159 0 3
  • 159 0 3
+1

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

Chia sẻ
  • 159 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 CÂU TRẢ LỜI


Đã trả lời thg 10 9, 2020 10:13 SA
+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>
Chia sẻ
Đã trả lời thg 10 9, 2020 10:38 SA
+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;
Chia sẻ
Avatar Dr Dokkan @dokkan7
thg 10 9, 2020 1:46 CH

Cảm ơn bạn.

Đã trả lời thg 10 9, 2020 9:37 SA
Chia sẻ
Avatar Dr Dokkan @dokkan7
thg 10 9, 2020 9:39 SA

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.

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí