css 如何在JavaScript中找到文本区域中字符的宽度？

2vuwiymt 于 2023-05-02 发布在 Java

关注(0)|答案(3)|浏览(155)

我需要在CSS px中找到HTML textarea元素中字符的宽度。
最好的解决方案是使用一个JavaScript函数，该函数接受一个字符并返回其宽度，并且必须处理特殊字符，如控制字符（\u0001，\u0096，\uFFFD等）。）如果它也与标签一起工作，考虑到文本区域中字符的索引，那就更好了。
我已经有一个函数可以做到这一点（链接在这里;我的项目是开源的，在GitHub上）使用HTML5文本区域，并在Chromium上工作，但它在Firefox中中断，特别是因为Firefox在文本区域（“十六进制框”）中呈现的控制字符与其他元素不同。

getCharacterWidth(char) {
        // Force zero-width characters
        if(new RegExp("\u00AD|\u02de|[\u0300-\u036F]|[\u0483-\u0489]|\u200b").test(char) ) { return 0 }
        // Non-renderable ASCII characters should all be rendered at same size
        if(char != "\u0096" && new RegExp("[\u{0000}-\u{001F}]|[\u{007F}-\u{009F}]", "g").test(char)) {
            let fallbackWidth = this.getCharacterWidth("\u0096");
            return fallbackWidth;
        }
        // Lazy-load - TODO: Get a cleaner way of doing this
        if(char in this.cachedWidths) {
            return this.cachedWidths[char];
        }

        // Try to get width
        let width = this.canvasContext.measureText(char).width;
        this.canvasContext.fillText(char, 100, 100);
        if(width > 20) {
            width /= 2; // Fix double-width-in-canvas Firefox bug
        } else if(width == 0 && char != "\u0096") {
            let fallbackWidth = this.getCharacterWidth("\u0096");
            return fallbackWidth; // In Firefox some control chars don't render, but all control chars are the same width
        }

        this.cachedWidths[char] = width;
        return width;
    }

我会非常感谢这里的建议，或一个PR in the project on GitHub forked from the display-special-chars branch。谢谢你的帮助。

css

来源：https://stackoverflow.com/questions/76145682/how-do-i-find-the-width-of-a-character-in-a-textarea-in-javascript

3条答案

按热度按时间

busg9geu1#

看看这段代码。

// create a new canvas element
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// set the font size and type
ctx.font = '16px Arial';

// get the width of the character 'A'
const charWidth = ctx.measureText('A').width;
console.log(`The width of the character 'A' is ${charWidth}px`);

我想这会对你有帮助。

赞(0）回复(0）举报 2023-05-02

gfttwv5a2#

function getCharWidthInTextarea(char, textarea) {
    // Create a temporary span element with the same font properties as the textarea
    var span = document.createElement('span');
    span.style.fontSize = window.getComputedStyle(textarea).fontSize;
    span.style.fontFamily = window.getComputedStyle(textarea).fontFamily;
    span.style.fontWeight = window.getComputedStyle(textarea).fontWeight;
    span.style.visibility = 'hidden';
    span.style.position = 'absolute';
    span.textContent = char;

    // Append the span element to the document body
    document.body.appendChild(span);

    // Get the width of the character using the offsetWidth property of the span 
    var width = span.offsetWidth;

    // Remove the span element from the document body
    document.body.removeChild(span);

    // Return the width of the character
    return width;
}

赞(0）回复(0）举报 2023-05-02

rqenqsqc3#

在JavaScript中，您可以通过创建临时元素，将其字体设置为与文本区域的字体匹配，然后使用offsetWidth属性测量临时元素中字符的宽度来查找文本区域中字符的宽度。下面是一个示例函数，它接受一个字符和一个textarea元素，并返回字符的宽度（以像素为单位）

function getCharacterWidth(char, textarea) {
// Create a temporary element to measure the width of the character
const temp = document.createElement('span');
temp.textContent = char;

// Copy the textarea's font to the temporary element
temp.style.font = getComputedStyle(textarea).font;

// Add the temporary element to the document so we can measure its width
document.body.appendChild(temp);

// Get the width of the character in pixels
const width = temp.offsetWidth;

// Remove the temporary element from the document
document.body.removeChild(temp);

return width;
}

你可以用一个字符和一个textarea元素来调用这个函数，以获得字符的宽度（以像素为单位）：

const charWidth = getCharacterWidth('a', 
document.querySelector('textarea'));
console.log(`The width of the character 'a' in the textarea is 
${charWidth}px`);

请注意，此函数仅适用于等宽字体。如果文本区域使用比例字体，则每个字符的宽度将根据特定字符和周围文本而变化。

赞(0）回复(0）举报 2023-05-02

我来回答

css 如何在JavaScript中找到文本区域中字符的宽度？

3条答案

相关问题

热门标签

最新问答