我将 textarea 的宽度设置为 100%,但现在我需要知道一行中可以容纳多少个字符。
我正在尝试编写一个 javascript 函数来自动增长/缩小文本区域。我试图避免使用 jquery,因为我只需要这个功能。
我的逻辑是rows = textarea.value.split('\n'),遍历rows和count += rows[i].length/textarea.cols,然后count += rows.length,最后textarea.rows = count。唯一的问题是count太大了,因为textarea.cols太小了。
我很想知道如何创建一个具有自动调整高度的文本输入,以便它更高,以适应您的文本?例如,如果我开始键入段落,它会从几行扩展以适合段落.
这是我目前得到的:
#commenttext {
width: 413px;
min-height: 22px;
max-height: 100%;
display: inline;
font-size: 11px;
color: #777777;
word-wrap: break-word;
font-family: "Open Sans", "Tahoma";
top: 7px;
position: relative;
left: 7px;
padding-left: 7px;
}Run Code Online (Sandbox Code Playgroud)
<form action="" method="POST">
<input type="text" id="commenttext">
</form>Run Code Online (Sandbox Code Playgroud)
但这只是一个普通的文本区域.
当我输入更多行时,如何使文本区域变得更高?我需要Javascript吗?
我已经创建了一个带有输入的表单,但该框仅处理单行中的文本.我想设置它以使输入字段类似于Twitter的输入字段,其中框本身是多行:
当你点击输入时它也会扩展:
这是我现在拥有的:
<form name="userForm">
<input type="text" id="userInput" name="userInput" placeholder="Enter text here.">
<button type="submit" id="button">Submit</button>
</form>
Run Code Online (Sandbox Code Playgroud)
我已经设置了按钮和输入的样式,但没有做任何改变其形状的事情,所以它是默认的.我有什么调整才能实现这一目标?
我正在使用这个问题的接受答案来构建一个textarea,它随着文本溢出而垂直扩展:
<!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
border: 0 none white;
overflow: hidden;
padding: 0;
outline: none;
background-color: #D0D0D0;
resize: none;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init () {
var text = document.getElementById('text');
function resize () {
text.style.height = 'auto';
text.style.height = text.scrollHeight+'px';
} …Run Code Online (Sandbox Code Playgroud) 我正在尝试调整这个关于如何通过 javascript 自动调整文本区域输入大小以实现闪亮 R 的答案。理想情况下,我想避免使用诸如闪亮JS之类的帮助程序包。
首先,我尝试了纯 javascript 实现,将 javascript 按原样加载到应用程序中(方法 1)。然后我尝试从闪亮的observeEvent中触发javascript函数(方法2)。
这两种方法都不起作用。看来我错过了一些东西。
方法一:
library(shiny)
jsCode1 <- "
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init () {
var text = document.getElementById('text');
function resize () {
text.style.height = 'auto';
text.style.height = text.scrollHeight+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () …Run Code Online (Sandbox Code Playgroud) 我有一个包含多个文本框的项目,需要其中一些成为Multiline.但问题是,当我将它们设置为Multiline时,我会失去所有的CSS样式.我已经四处搜索并发现文本框在运行时变为TextArea,选择了Multiline.虽然,我仍然在寻找一种方法来保持或覆盖CSS以保持我的背景颜色,大小和首选字体
我需要自动调整文本区域的高度.默认情况下,它将是单行.在增长文本的同时,还需要增加高度.请用css向我推荐.或者用简单的jave脚本告诉我.
代码是:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
textarea {
resize: none;
overflow: auto;
min-height: 24px;
max-height: 100px;
}
#url{ word-break: break-all;
font-family: 'Lato', sans-serif;
cursor: text;
resize: none;
height: 24px;
font-size: 14px;
line-height: 22px;
background-color: transparent;
border: 0;
margin-top: 6px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-decoration: none;
width:500px}
</style>
<body>
<textarea readonly id="url">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever …Run Code Online (Sandbox Code Playgroud)