相关疑难解决方法(0)

如何在高度上自动调整文本区域的大小?

我将 textarea 的宽度设置为 100%,但现在我需要知道一行中可以容纳多少个字符。

我正在尝试编写一个 javascript 函数来自动增长/缩小文本区域。我试图避免使用 jquery,因为我只需要这个功能。

我的逻辑是rows = textarea.value.split('\n'),遍历rowscount += rows[i].length/textarea.cols,然后count += rows.length,最后textarea.rows = count。唯一的问题是count太大了,因为textarea.cols太小了。

html javascript textarea

4
推荐指数
1
解决办法
7213
查看次数

键入时输入字段越高越高

我很想知道如何创建一个具有自动调整高度的文本输入,以便它更高,以适应您的文本?例如,如果我开始键入段落,它会从几行扩展以适合段落.

这是我目前得到的:

#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吗?

html javascript css

4
推荐指数
1
解决办法
639
查看次数

使输入元素(type ="text")处理多行文本

我已经创建了一个带有输入的表单,但该框仅处理单行中的文本.我想设置它以使输入字段类似于Twitter的输入字段,其中框本身是多行:

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)

我已经设置了按钮和输入的样式,但没有做任何改变其形状的事情,所以它是默认的.我有什么调整才能实现这一目标?

html css forms twitter input

4
推荐指数
2
解决办法
5万
查看次数

如何在自动调整textarea中键入时停止窗口跳转

我正在使用这个问题的接受答案来构建一个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 textarea autoresize

3
推荐指数
1
解决办法
4710
查看次数

在闪亮的R中自动调整textAreaInput的大小

我正在尝试调整这个关于如何通过 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)

javascript r shiny

3
推荐指数
1
解决办法
752
查看次数

设置文本框Multiline而不会丢失CSS

我有一个包含多个文本框的项目,需要其中一些成为Multiline.但问题是,当我将它们设置为Multiline时,我会失去所有的CSS样式.我已经四处搜索并发现文本框在运行时变为TextArea,选择了Multiline.虽然,我仍然在寻找一种方法来保持或覆盖CSS以保持我的背景颜色,大小和首选字体

css textbox multiline

2
推荐指数
1
解决办法
1万
查看次数

Textarea自动调整高度

我需要自动调整文本区域的高度.默认情况下,它将是单行.在增长文本的同时,还需要增加高度.请用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)

html javascript css

0
推荐指数
1
解决办法
2821
查看次数

标签 统计

javascript ×5

css ×4

html ×4

textarea ×2

autoresize ×1

forms ×1

input ×1

multiline ×1

r ×1

shiny ×1

textbox ×1

twitter ×1