简体   繁体   English

将文本从弹出窗口插入文本区域

[英]Insert text from popup into textarea

I'm trying to insert a input text from an popup to a textarea on the page, defined from cursor position. 我试图将输入文本从弹出窗口插入页面上的文本区域,该区域是从光标位置定义的。

The idea is, that a user clicks a button, a popup opens, where the user can write text in an input box and then click an button to insert that text to the textarea the cursor position was in. 这个想法是,用户单击一个按钮,会打开一个弹出窗口,用户可以在其中在输入框中编写文本,然后单击一个按钮以将该文本插入到光标所在的文本区域。

position = null;

function cursorPosition () {
 if(!window.getSelection)
 {
  position = document.selection.createRange().duplicate();
 }
 else 
 {
  position = window.getSelection();
 }
}

function insertAtCaret (text)
{
 position.text = text;
}

In the popup window I have: 在弹出窗口中,我有:

function onclose(text)
{
 var newtext= text;
 opener.insertAtCaret(newtext);
 window.close();
}

Can't make it work in chrome, only IE.... Everytime I get an 只能在IE中无法使其在chrome中工作。

Uncaught TypeError: Property 'insertAtCaret' of object [object Window] is not a function 未捕获的TypeError:对象[object Window]的属性'insertAtCaret'不是函数

Any idea to make it work in all browsers? 有什么想法可以使其在所有浏览器中正常工作吗?

Below code accepts input from an inputbox and adds it to the textarea as required. 下面的代码接受来自输入框的输入,并根据需要将其添加到文本区域。 It appends the inputbox value to the textarea. 它将输入框值附加到文本区域。

<!DOCTYPE html>
<html>
<body>

<p>Click the button to demonstrate the prompt box.</p>

<button onclick="myFunction()">Try it</button>

<textarea id="demo" cols="30" rows="5">
</textarea>

<script>
function myFunction()
{
var x;

var name=prompt("Please enter your name","Harry Potter");

if (name!=null)
  {
  x = document.getElementById("demo").value; 
  x = x + " Hello " + name + "! How are you today?"; // textarea value is appended here.
  document.getElementById("demo").value=x;
  }
}
</script>

</body>
</html>

我认为有与insertAtCaret在FF \\ Chrome浏览器,你可能要检查出的问题这个来代替。

从可编辑文件中插入文本格式<div>或 textarea 进入数据库</div><div id="text_translate"><p>我目前正在为我自己的网站开发一个个人项目,我正在尝试添加将格式化文本存储到数据库中的功能。 到目前为止,我所做的是能够将字体从斜体更改为粗体作为示例,但我完全不知道如何将其传递到数据库。</p><pre> &lt;style&gt; #fake_textarea { width: 100%; height: 200px; border: 1px solid red; } #jBold { font-weigth: bold; } #jItalic{ font-style:italic; } &lt;/style&gt; &lt;script src="/scripts/snippet-javascript-console.min.js?v=1"&gt;&lt;/script&gt; &lt;body&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; &lt;button id="jBold"&gt;&lt;b&gt;B&lt;/b&gt;&lt;/button&gt;&lt;button id="jItalic"&gt;&lt;i&gt;I&lt;/i&gt;&lt;/button&gt; &lt;div id='fake_textarea' contenteditable&gt; Select some text and click the button to make it bold... &lt;br&gt;Or write your own text &lt;/div&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $('#jBold').click(function() { document.execCommand('bold'); }); }); &lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $('#jItalic').click(function() { document.execCommand('italic'); }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre><p> 示例工作: <a href="https://codepen.io/goldenowl/pen/KKdZQxY" rel="nofollow noreferrer">codepen</a></p></div> - Insert text format from an editable <div> or textarea into the database

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 是否可以从弹出面板中修剪文本区域中的文本? - Is it possible to trim text in a textarea from the popup panel? 将文本插入div的sceditor textarea中? - insert text into an sceditor textarea from a div? 能够将文本区域中的文本插入表格 - Be able to insert text from a textarea into a table 从 HTML 中的 Textarea 读取值并在弹出窗口中显示格式化文本 - Read Value from Textarea in HTML and Display formatted text in Popup 将文字插入<textarea> - insert text into <textarea> 将文本插入文本区域 - Insert text into textarea 通过链接将文本插入文本区域 - Insert text into textarea by link 将文本插入选定的文本区域 - insert text into selected textarea 从 TextArea 中删除文本并使用 javascript 将新数据插入其中 - Remove text from TextArea and insert new data into it using javascript 从可编辑文件中插入文本格式<div>或 textarea 进入数据库</div><div id="text_translate"><p>我目前正在为我自己的网站开发一个个人项目,我正在尝试添加将格式化文本存储到数据库中的功能。 到目前为止,我所做的是能够将字体从斜体更改为粗体作为示例,但我完全不知道如何将其传递到数据库。</p><pre> &lt;style&gt; #fake_textarea { width: 100%; height: 200px; border: 1px solid red; } #jBold { font-weigth: bold; } #jItalic{ font-style:italic; } &lt;/style&gt; &lt;script src="/scripts/snippet-javascript-console.min.js?v=1"&gt;&lt;/script&gt; &lt;body&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; &lt;button id="jBold"&gt;&lt;b&gt;B&lt;/b&gt;&lt;/button&gt;&lt;button id="jItalic"&gt;&lt;i&gt;I&lt;/i&gt;&lt;/button&gt; &lt;div id='fake_textarea' contenteditable&gt; Select some text and click the button to make it bold... &lt;br&gt;Or write your own text &lt;/div&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $('#jBold').click(function() { document.execCommand('bold'); }); }); &lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $('#jItalic').click(function() { document.execCommand('italic'); }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre><p> 示例工作: <a href="https://codepen.io/goldenowl/pen/KKdZQxY" rel="nofollow noreferrer">codepen</a></p></div> - Insert text format from an editable <div> or textarea into the database
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM