如何在HTML输入文本框内创建超链接？Django+JS+HTML实现网站跳转

Hey there! Let's break down your two requirements step by step—they’re related but need different approaches, especially with your Django + JS/HTML stack.

Quick note: A site name alone can’t trigger a redirect—you need to store the corresponding URL too. So I’ll cover two common implementations here:

方案A：用户输入网站名称+URL，保存后点击名称跳转 #

前端（HTML + JS） #

First, build a form for input and a section to display saved links:

<!-- Input Form -->
<form id="siteForm">
  <label for="siteName">网站名称:</label>
  <input type="text" id="siteName" required>
  
  <label for="siteUrl">网站URL:</label>
  <input type="url" id="siteUrl" required>
  
  <button type="submit">保存</button>
</form>

<!-- Saved Links Display -->
<div id="savedSites" style="margin-top: 20px;"></div>

Then use JavaScript to handle form submission, send data to Django, and render clickable links:

document.getElementById('siteForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  
  const siteName = document.getElementById('siteName').value;
  const siteUrl = document.getElementById('siteUrl').value;
  
  try {
    const response = await fetch('/save-site/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': getCookie('csrftoken') // Don't forget Django's CSRF token!
      },
      body: JSON.stringify({ name: siteName, url: siteUrl })
    });
    
    if (response.ok) {
      const savedSite = await response.json();
      // Create clickable link element
      const link = document.createElement('a');
      link.href = savedSite.url;
      link.target = '_blank'; // Open in new tab
      link.textContent = savedSite.name;
      link.style.display = 'block';
      link.style.margin = '5px 0';
      
      document.getElementById('savedSites').appendChild(link);
      // Reset form
      document.getElementById('siteForm').reset();
    }
  } catch (err) {
    console.error('Save failed:', err);
  }
});

// Helper function to get CSRF token from cookies
function getCookie(name) {
  let cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
      const cookie = cookies[i].trim();
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}

后端（Django） #

First, create a model to store site data:

# models.py
from django.db import models

class SavedSite(models.Model):
    name = models.CharField(max_length=200)
    url = models.URLField()
    
    def __str__(self):
        return self.name

Then add a view to handle the POST request:

# views.py
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from .models import SavedSite
import json

@csrf_exempt
def save_site(request):
    if request.method == 'POST':
        data = json.loads(request.body)
        site = SavedSite.objects.create(name=data['name'], url=data['url'])
        return JsonResponse({'name': site.name, 'url': site.url})
    return JsonResponse({'error': 'Invalid request method'}, status=400)

Update your URLs to map the endpoint:

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('save-site/', views.save_site, name='save_site'),
]

方案B：简化版——直接输入URL保存跳转 #

If you don’t need separate site names, just use a single URL input field. Adjust the form, JS, and Django model to only handle the URL field—core logic stays the same.

Plain <input> or <textarea> elements only support plain text. To add hyperlinks to an editable field, use a contenteditable div to simulate an input box, then use JavaScript to insert links.

前端实现 #

<!-- Editable "input box" -->
<div 
  id="editableInput" 
  contenteditable="true" 
  placeholder="输入内容，点击按钮插入超链接"
  style="border: 1px solid #ccc; padding: 8px; min-height: 100px;"
></div>

<!-- Link Insert Modal -->
<button id="insertLinkBtn" style="margin: 10px 0;">插入超链接</button>
<div id="linkModal" style="display: none; margin: 10px 0;">
  <label for="linkUrl">链接URL:</label>
  <input type="url" id="linkUrl" required>
  
  <label for="linkText" style="margin-left: 10px;">链接文本:</label>
  <input type="text" id="linkText" required>
  
  <button id="confirmLink" style="margin-left: 10px;">确认插入</button>
</div>

<!-- Save Button -->
<button id="saveContentBtn">保存内容</button>

Add JavaScript to handle link insertion and save:

const editableInput = document.getElementById('editableInput');
const insertLinkBtn = document.getElementById('insertLinkBtn');
const linkModal = document.getElementById('linkModal');
const confirmLinkBtn = document.getElementById('confirmLink');
const saveContentBtn = document.getElementById('saveContentBtn');

// Open link insert modal
insertLinkBtn.addEventListener('click', () => {
  linkModal.style.display = 'block';
});

// Insert hyperlink at cursor position
confirmLinkBtn.addEventListener('click', () => {
  const linkUrl = document.getElementById('linkUrl').value;
  const linkText = document.getElementById('linkText').value;
  
  if (linkUrl && linkText) {
    const link = document.createElement('a');
    link.href = linkUrl;
    link.target = '_blank';
    link.textContent = linkText;
    
    // Insert at cursor
    const selection = window.getSelection();
    if (selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      range.deleteContents();
      range.insertNode(link);
    } else {
      editableInput.appendChild(link);
    }
    
    // Reset modal
    linkModal.style.display = 'none';
    document.getElementById('linkUrl').value = '';
    document.getElementById('linkText').value = '';
  }
});

// Save rich content to Django
saveContentBtn.addEventListener('click', async () => {
  const content = editableInput.innerHTML;
  
  try {
    const response = await fetch('/save-editable-content/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': getCookie('csrftoken')
      },
      body: JSON.stringify({ content: content })
    });
    
    if (response.ok) {
      alert('内容保存成功！');
    }
  } catch (err) {
    console.error('Save failed:', err);
  }
});

// Reuse the getCookie function from earlier
function getCookie(name) {
  let cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
      const cookie = cookies[i].trim();
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}

后端（Django） #

Create a model to store rich text content:

# models.py
from django.db import models

class EditableContent(models.Model):
    content = models.TextField()  # Stores HTML content
    created_at = models.DateTimeField(auto_now_add=True)
    
    def __str__(self):
        return f"Content saved at {self.created_at}"

Add a view to handle saving:

# views.py
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from .models import EditableContent
import json

@csrf_exempt
def save_editable_content(request):
    if request.method == 'POST':
        data = json.loads(request.body)
        content = EditableContent.objects.create(content=data['content'])
        return JsonResponse({'success': True, 'id': content.id})
    return JsonResponse({'error': 'Invalid request method'}, status=400)

Update URLs:

# urls.py
urlpatterns = [
    # Existing save-site path
    path('save-editable-content/', views.save_editable_content, name='save_editable_content'),
]

Important Notes #

• To prevent XSS attacks, use the bleach library in Django to sanitize user-submitted HTML content before saving it.
• Customize the contenteditable div’s CSS to match your input box styling (border, padding, font, etc.).

内容的提问来源于stack exchange，提问作者Amritha Menon