如何将文本输入定向到html页面中的隐藏字段？

Question

I'm trying to handle copying and pasting to an application I'm developing by redirecting them into a hidden field. The problem is that, when I set visibility: hidden on the field I'm trying to direct the input to, typing or copy/pasting into the field doesn't seem to work. I'm trying to use a <textarea> tag to catch the text, and setting the focus with document.select('textAreaID').focus() , and it works, unless I set visibility: hidden in the css.

Test fiddle that shows that behavior. Blue square gives focus, red and green toggle visibility.

Is there a good way to hide the text area and still be able to paste or type into it? If not, is there a good alternate way to redirect copy behavior to yield a chunk of text that can be parsed, edited, and worked with?

(Also: there's some d3 in the fiddle since I'm using it for something else and it offers convenient APIs.)

Answer 1

It looks like browsers do not allow focusing on visibility:hidden elements. It might be different on other browsers, but it wasn't working for me on Chrome: http://jsfiddle.net/ps6KK/

So since we can't do visibility:hidden we need to essentially force the textarea to seem like it's hidden. You can do that by wiping out all of it's height/weight/etc and setting the background to transparent. You might also want to set the text color to transparent if you want.

#textDiv {
  resize: none;
  padding: 0;
  height: 0;
  border: 0;
  width: 0;
  background: transparent;
}

A more detailed example is here: http://jsfiddle.net/4Jwxv/1/

Answer 2

您可以使用jQuery中的.html（）方法来更新textarea

Answer 3

Is it your problem storing the text when you "copy" (not "paste") it? You can do that with a good old global JavaScript variable (not declared inside the event handler function, but outside); no need to store it into a hidden HTML element.