javascript - 如何将输入框的内容转移到段落元素，如博客-6ren

javascript - 如何将输入框的内容转移到段落元素，如博客

转载作者：行者123 更新时间：2023-11-28 09:02:27

26

4

我正在尝试制作一个类似于博客的网站，但我无法弄清楚如何对齐输入元素中的文本以及如何将来自该元素的条目发布并保存为它下面的段落元素....就像 facebook .我知道这不是一个非常详细的问题，但我是 HTML、Javascript 和 CSS 的新手。

在这里摆弄它。

<head>

    <title font-weight="bold">Social Rejects</title>
    <link href="font-awesome.min.css" rel="stylesheet">

    <link href='font.css' rel='stylesheet' type='text/css'>

    <link href='style.css' rel='stylesheet'>


    <link rel="shortcut icon" href="sr-head-ico.ico" type="image/x-icon">
    <script language="JavaScript" type="text/javascript">
    <!--- PASSWORD PROTECTION SCRIPT

        function TheLogin() {

        var password = '69';

        if (this.document.loginsec.sec.value == password) {
            top.location.href="secret.html";
        }
        else {
        location.href="incorrect.html";
        }
        }

    // End hiding --->
    </script>
</head>

<body>


    <div class="pheader">
        <img src="sr-head.png"></img>
        <right>
        <a href="login.html">Log-In</a>
        </right>
    </div>
        <!-- Main body -->

<div class="jumbotron">


<script src="jquery.min.js"></script>
<script src="app.js"></script>

<div class="nav"
    <ul>
        <li href="index.html">Home</li>
        <li href="#">My Page</li>
        <li href="#">My Followers</li>
        <li href="#">Following</li>
        <li href="#">About S.R.</li>
    </ul>
</div>
<div class="na">
    <div class="nti">Feature not yet added!
    </div>
    <info>This feature has not yet been constructed. Please check back for more info.<br>
    <a style="text-decoration: underline;">These things will be broken for <b>awhile</b>.</a></info><br><br><center>
    <confirm>Okay</confirm>
    </center>
</div>
<div class="secret">
    <div class="nti">Congratulations!
    </div>
    <center>
    Enter Secret password:<br>
        <form name="loginsec" style="margin: 0px">
        <INPUT TYPE="text" NAME="sec" size="24" onKeyDown="if(event.keyCode==13) event.keyCode=9;" style="width: 252px; height: 26px; margin: 5px;"><br>
        <input type="button" value="Click to check" style="width : 150px; margin: 3px; border: 0px; padding: 10px;" onClick="TheLogin(this.form)">
        </form>
    </center><center>
    <confirm>Okay</confirm>
    </center>
</div>
<div class=main-body>
    <ti>Rodney Mahan</ti><br>
    <beta>This page is in beta</beta>

    <div class="profile">
        <div class="header"
        <ul>
            <li><b>About Rodney:</b></li>
            <li>Enjoys <b>Making Websites</b></li>
            <li><b>CEO</b> of <b>Mahan's Web Design</b></li>
            <li>Born on <b>February 4th, 1999</b></li>
        </ul>
        </div>
    </div>
    <div class="blog">
        <blog-title>Rodney's Blog</blog-title><br>
        <form>
        <input placeholder="New Post"></input>
        </form>
    </div>
</div>
</body>

http://jsfiddle.net/MahanWebDesign/bm8fz2u5/1/

最佳答案

首先，感谢你能解决这样的问题。 Adeneo 是对的，它可能比你想象的要复杂。从 3 个层次来考虑这个问题可能会有所帮助:

前端:这是您的 HTML、CSS 和 JavaScript。
中间层:这是前端和数据库之间的通信。
后端:您存储帖子、用户和帐户等内容的数据库。

通常，您的 JavaScript 将通过 REST 等 API(应用程序编程接口(interface))与中间层对话，以实际发送和检索数据。你是对的，这个问题太笼统了。如果您将此作为练习来学习那是一回事，如果您只是想启动并运行某些东西，那是另一回事。

如果您只是想启动并运行某些东西，请尝试查看 WordPress.com .它也会为您托管它，并且不会弄乱服务器。

如果您想了解 HTML、CSS 和 JavaScript，您可以尝试 Wordpress.org .一旦将它安装在服务器上，它就会为您处理第 2 层和第 3 层，并在第 1 层方面为您提供很多帮助。您可以下载它，然后开始查看它是如何工作的。这将涉及一些 PHP 以及 HTML 和 CSS。

如果您想了解数据库及其工作原理，您可以从一个简单的数据库开始，例如 Firebase。您可以获得免费的开发人员许可证，并开始尝试使用 JSON 和其他方式发送和存储信息。如果您真的想了解数据库结构和交互，MySQL 是一个很好的起点。

当然，您不必一下子学会所有内容，而且很多人只专注于一两层。

关于javascript - 如何将输入框的内容转移到段落元素，如博客，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26850586/

26

4

0

文章推荐： css - 可在移动设备上进行手指友好排序

文章推荐： CSS3 变换、倾斜和旋转

文章推荐： css - 使用css设置原始图片宽度和高度的50%

文章推荐： javascript - 如何使用 two.js 创建圆形热点？

javascript - 如何使用鼠标移动网页上的页面部分(段落)？
我的网页上显示了一份简历。其中包含部分(段落)，例如教育、经验、项目等，这里是客户想要通过在网页的段落(节)上拖动鼠标来移动页面上的这些节。我怎样才能实现这个功能。我正在使用 ruby on R
css - float 段落
我有一个特定大小的 div，它是图像和两个段落。都设置了向左浮动 div { width: 400px; height: 400px; } img { float: left; wi
完美对齐的 HTML 段落
我想完美对齐一段，使整个段落位于页面中央，但左右两边完美对齐。这是一个完美对齐的段落的图片示例: 该段落看起来像是在某种盒子中，左右两边完全笔直。我如何在 css 或 html 中执行此操作？最佳答
javascript - 按行而非字符 chop 段落
我的 div 中有多个带有段落的项目，我想将它们 chop 为 2 行。我尝试使用高度进行 chop ，但结果会导致单词被 chop 。我无法使用字符，因为在某些情况下单词很长并且会被推到新行。我正
c# - 什么是匹配字符串(段落)中大型短语词典中项目的有效方法
有没有办法通过 .Net 框架(或有人写过类似的东西)在传递字符串和字典对象时获取匹配数组？首先是一些背景我需要我有运动队的 csv 文件，我将其加载到字典对象中，例如... Team, Var
java - 用java创建一个计算句子、段落、字母和单词的程序
我需要创建一个程序来计算文本文件中字符的频率以及段落、单词和句子的数量。我有一个问题，当我的程序输出字母的频率时，程序会为字母表中的每个字母输出多个输出。输出应该是这样的: 如果输入是“hello
java - 段落 View 首选项更改
我的 Swing 应用程序中有一个 JTextPane，其上方有一个 JSlider。当我拖动 slider 时，我希望当前具有插入符号的 JTextPane 段落减少/增加其宽度(并相应地调整高度)
c# - 什么是匹配字符串(段落)中大型短语词典中项目的有效方法
有没有办法通过 .Net 框架(或有人写过类似的东西)在传递字符串和字典对象时获取匹配数组？首先是一些背景我需要我有运动队的 csv 文件，我将其加载到字典对象中，例如... Team, Var
Perl 段落 n 元语法
假设我有一个文本句子: $body = 'the quick brown fox jumps over the lazy dog'; 我想将该句子放入“关键字”的散列中，但我想允许多单词关键字；我有以
java - 用匹配器解析协议(protocol)段落？
我尝试编写一个服务器-客户端程序。我可以发送协议(protocol)文本并正确获取文本。但是当我尝试解析文本时，我遇到了 Matcher 类的问题。因为它只匹配第一行。那么我怎样才能找到正确的字符串并
Jquery:删除某些 WordPress 段落
由于 WordPress 在所有内容上都添加了段落标签，因此我需要在某些条件下删除段落标签。在这种情况下，我希望它们从图像中消失。我让那部分工作了: $(".scroller img").un
python - 匹配多个包含括号内文本的完整 HTML 段落
我需要匹配包含三个大括号之间的文本的完整 HTML 段落。这是我输入的 HTML: {{{Lorem ipsum dolor sit amet. Ut enim ad minim veniam. D
javascript - 用javascript包装大 Markdown 段落
我正在尝试查找大段落(超过一定数量的字符)并将其包装到一个范围内。目前我正在这样做: output.replace(/(\n{2}|^)([^\n{2}]{500,})(\n{2}|$)/mg, '$
javascript - 尝试根据选择显示不同的 HTML 段落
所以我有这个模式，它应该提供不同的描述性段落，具体取决于用户从下拉列表中做出的选择。目前它只始终显示所有段落。我希望它在选择“公共(public)”时显示“隐藏”，在选择“内部”时显示“隐藏2”。等等
javascript - 如何将文本区域中粘贴的文本分成由相同字符数组成的
段落？
JSFiddle Link 我正在使用的 JSFiddle 似乎正是我的元素所需要的。但是，我将如何更改此当前代码以确保每个分段的段落包含相同数量的字符并且所有段落的宽度相同？任何帮助将不胜感激，尤
CSS - 段落 - 我需要设置字体大小 : inherit?
我希望我所有的 p 标签继承正文的字体大小——如果我没有在它们上声明字体大小或将它们嵌套在带有字体的父项中，它们会自动执行——尺寸声明。但是我应该在 CSS 中的 p 中添加 font-size:
php - 段落
警告框作为回显？
Achtung! This alert box indicates a dangerous or potentially negative action.× 所以我创建了自己的警告框，但问
文本框中的 Python docx 段落
有什么方法可以使用 python-docx 访问和操作文本框中现有 docx 文档中的文本？我试图通过迭代在文档的所有段落中找到关键字: doc = Document('test.docx') fo
algorithm - 在字符串缓冲区/段落/文本中查找单词
这是在亚马逊电话采访中被问到的——“你能写一个程序(用你喜欢的语言 C/C++/等)在一个大的字符串缓冲区中找到一个给定的词吗？即数字出现次数“ 我仍在寻找我应该给面试官的完美答案。我试着写一个线性搜
php - 如何在多行(段落)中书写文本？
当我使用这段代码时，我可以用文本制作图像，但在一行中， function writetext($image_path,$imgdestpath,$x,$y,$angle,$text,$font,$fo

首页

博学

6Ren·AI

商城

javascript - 如何将输入框的内容转移到段落元素，如博客