javascript - 如何在laravel中实时显示用户输入?

标签 javascript html css laravel

<分区>

我有一个文本输入框,我想在用户输入文本的同时(实时)在用户输入框下方显示用户输入。
我正在使用 laravel 框架。
就像问题页面中的 stckoverflow 一样...
这是我的 html 代码...

    {{ Form::open(['action' => 'PostsController@store', 'method' => 'POST']) }}
    {{ Form::token() }}
    <div class="form-group">
        {{ Form::label('title', 'title') }}
        {{ Form::text('title', '', ['class' => 'form-control', 'placeholder' => 'title...']) }}
    </div>
    <div class="form-group">
            {{ Form::label('body', 'content...') }}
            {{ Form::textarea('body', '', ['class' => 'form-control', 'rows' => '20', 'placeholder' => 'content...']) }}            
    </div>
    {{ Form::submit('submit', ['class' => 'btn btn-primary'])}}
    {{ Form::close() }}

我是这个意思 enter image description here

最佳答案

var textinput = document.getElementById('textinput');

textinput.onkeyup = textinput.onkeypress = function(){
    document.getElementById('preview').innerHTML = this.value;
}
#preview {
  display: block;
  padding: 2px 3px;
  color: #303030;
  background: #f1f1f1;
  border: 1px solid #e1e1e1;
  border-radius: 3px;
}
<textarea id="textinput" placeholder="Your text..."></textarea>
<pre>
  <code id="preview">Preview</code>
</pre>

如果您想要更高级的东西,您应该查看一些库,例如 https://github.com/markedjs/marked

关于javascript - 如何在laravel中实时显示用户输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57398104/

上一篇:css - 多个 scss 文件引用一个主样式文件

下一篇:html - 没有唯一容器时分屏布局的最佳方法

相关文章:

Javascript - 元素的 CSS 样式在附加时不显示

android - Chrome for Android 缺少 SVG 首字母支持的解决方法

javascript - 在 Google Analytics 中记录 javascript 错误

javascript - 使用 Aurelia 的谷歌地图

javascript - 如何使用输入 radio 正确验证表单?

html - Firefox 中奇怪的方 block 字符

javascript - 无法从 firebase 对象读取所有数据

javascript - AdWords 脚本无法使用 Ids 功能找到

html - 当 div/component 在视口(viewport)中时,angular 2 播放 css 动画

php - IE7 上的菜单损坏 - wordpress 网站